4

第三次尝试。我有一个从远程服务器拉出的表，我使用$('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 回答