隐藏一些行的交替行颜色答案

【问题标题】：Alternating row colors with some rows hidden隐藏一些行的交替行颜色
【发布时间】：2018-10-07 20:45:19
【问题描述】：

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

请帮忙。

【问题讨论】：

你能提供一个jsFiddle吗？
这里是 jsfiddle.net/nTtyd。
你的小提琴不起作用，你的 ajax 调用也是一个本地地址 - 所以我们看不到你拉回的数据
您好 user887515。不知道如何使用小提琴。请询问与我的代码相关的任何内容，我会解释。谢谢。
我也不确定如何模拟 ajax 调用，所以我们将跳过它。你是如何根据单元格值设置颜色的，我在小提琴中看不到。

标签： jquery html-table

【解决方案1】：

我想这可能就是你要找的。p>

单击一行将其删除。保持交替的颜色，并根据它们的值相应地显示单元格。

交替行的关键是在奇数或偶数之前要求可见。

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(); 
});

【讨论】：

这行得通！但让我进一步解释一下。只有 1 列具有该条件。该列称为“ROI”。其他列有不同的条件。例如，另一个名为“欠债”的列如果值为 0，则无法显示红色单元格。那么我该如何编码，使其基于列标题名称而不是 TD 类，因为我不知道具体情况我正在远程访问此表。谢谢。
您必须找出 Debt Owed 列的列号，然后应用到 tr 的 nth-child('number of the debt owed column')。您可能应该将其作为一个新问题提出，因为您在这里提出的问题是关于交替行颜色的。
我想我明白了。我用$("th").filter(function(){ return $(this).text() == 'Debt Owed';}). 替换了$('td.percentage').，并且该条件仅特定于该列。用户887515，非常感谢！我的朋友，你会得到祝福的。
抱歉，等待，行不是交替的白色和灰色。我仍然需要帮助。
他们确实交替出现。我没有选择白色和灰色，而是浅灰色和灰色，但它们确实交替出现。在最新的 Chrome、FF 和 IE8、9 和 10 中测试。您可能在 IE10 中使用带有 jsfiddle 的最新 jQuery 有问题，切换到以前的版本就可以了。 jsfiddle.net/WWFUr/1