4

3回目の試み。リモートサーバーから取得したテーブルがあり、を使用していくつかの行を非表示にし$('tr:nth-child(row#)').hide();ました。テーブルの行の色が交互に表示されなくなりました。また、表のセルは、セルの内容に応じて色が変わります。セル値が 81 ～ 100% の場合は緑、61 ～ 80% の場合はオレンジ、0 ～ 60% の場合は赤です。これが私のjqueryです：

$(document).ready(function(){
    $('tr:even').addClass('even'); $('tr:odd').addClass('odd');
});

var $trs = $('tr').removeClass('even odd').filter(":visible");
$trs.filter(':even').addClass('even');
$trs.filter(':odd').addClass('odd');

これが私のCSSです：tr.odd td{ background-color: #FFFFFF;} tr.even td{background-color: #C0C0C0;}

上記のコードは実際には行を交互に表示しますが、セルの色を削除します。一方tr.odd{ background-color: #FFFFFF;} tr.even{background-color: #C0C0C0;}、セルの色は保持されますが、交互の色は削除されます。助けてください。

ここに私のHTML全体があります：

<html>
    <head>
    <link type="text/css" rel="stylesheet" href="css.css" />
        <script src="jquery-1.10.1.min.js"></script>
    <script language="Javascript"> 
        function View(){
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("datatable").innerHTML=xmlhttp.responseText;        

                $("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white
                $("td").filter(function(){ return $(this).text()=='R2';}).text('Row2'); //grey
                $('tr:nth-child(3)').hide();                                            //white
                $("td").filter(function(){ return $(this).text()=='R4';}).text('Row4'); //grey
                $('tr:nth-child(5)').hide();                                            //white
                $("td").filter(function(){ return $(this).text()=='R6';}).text('Row6'); //grey
                $("td").filter(function(){ return $(this).text()=='R7';}).text('Row7'); //white

                // Alternate visible rows to white and grey
                $(document).ready(function(){
                    $('tr:even').addClass('even');
                    $('tr:odd').addClass('odd');
                });

                var $trs = $('tr').removeClass('even odd').filter(":visible");
                $trs.filter(':even').addClass('even');
                $trs.filter(':odd').addClass('odd');
            }
        }
        var parameters = "search="+"rog_en_vo_ts_t1";
        xmlhttp.open("POST", "http://process_this_table.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(parameters);         
    }
    </script>
    </head>

<body onload="View();" >
    <div id="datatable" align="center"></div>
</body>
</html>

そして、ここに私のCSSがあります:

tr.odd{background-color: #FFFFFF;} 
tr.even{background-color: #C0C0C0;}

助けてください。

4

1 に答える 1

3

これはあなたが探しているものかもしれないと思います。

行をクリックして削除します。交互の色が保持され、セルはその値に基づいて表示されます。

交互の行の鍵は、奇数または偶数の前に表示を要求することです。

http://jsfiddle.net/WWFUr/

function setRowColours(){
    $('table tr:visible:odd').css({"background": "grey"});
    $('table tr:visible:even').css({"background": "lightgrey"});
    $('td.percentage').each(function(){
        if($(this).html() > 80){
            $(this).css({"background": "green"});
        } else if($(this).html() <= 60){
            $(this).css({"background": "red"});
        } else{
            $(this).css({"background": "orange"});            
        }
    });
}

$(document).ready(function(){
    setRowColours();
});

$('tr').click(function(){
    $(this).hide();
    setRowColours(); 
});
于 2013-06-08T22:22:00.787 に答える