使用jQuery设置交替行的颜色？答案

【问题标题】：Set color of alternate row using jQuery?使用jQuery设置交替行的颜色？
【发布时间】：2018-09-17 05:33:23
【问题描述】：

我正在尝试使用查询来设置 html 表的交替行的颜色。但是每次我添加一个新的行查询都会切换整个表的颜色。这是我正在使用的 Javascript 代码：

var alternate = true;
function addRow(data) {
    if(alternate){
        $("table.live_feed").find('tbody.main').prepend(data).css("background", "#f1f1f1");
        alternate = false;
    }else{
        $("table.live_feed").find('tbody.main').prepend(data).css("background", "white");
        alternate = true;
    }
}

PS：我在 Stack Overflow 上查看了一些类似的问题，它们会改变奇数行或偶数行的颜色。我不想更改已经存在的行的颜色，我只想更改正在添加的新行的颜色。

【问题讨论】：

Alternate row coloring in jquery 的可能重复项
您可能会发现最简单的方法是将类添加到那些新添加的行 class="new"（例如），并使用诸如 $('tr.new:nth-child(odd)') 之类的选择器来定位那些新添加的奇数行行。
为什么只想考虑“新行”？表中的所有行肯定都有斑马条纹吗？只考虑新行只会让事情变得更加复杂。
什么是data？它是否有任何id 或class 可以对它进行.css('background-color', 'yourColor') 处理？如果您只是更改颜色，也可以尝试使用background-color
您可以在较新的浏览器中使用 CSS 完全做到这一点...

标签： javascript jquery css html-table

【解决方案1】：

您的.css 作用于找到的项目 (tbody.main)，而不是您希望它作用于数据：

var data = $(data).css("background", "#f1f1f1");
$("table.live_feed").find('tbody.main').prepend(data);

附带说明，对于交替的行颜色，您可以使用选择器 :odd 和 :even

示例：

$('tr:odd').css('background', 'lightgray');

【讨论】：

【解决方案2】：

prepend 和 append 和其他 DOM 插入方法不会返回刚刚创建的元素，而是返回您调用它们的 jQuery 对象。在您的代码中，css 调用应用于tbody.main jQuery 对象。

在此示例中，您可以看到append 调用的返回元素是div 具有test id 的元素。

http://jsfiddle.net/marcosfromero/VUrhZ/

在同一个示例中，您可以看到在prepend 之后使用first() 将css 应用于刚刚插入的元素的解决方法。

【讨论】：