Question

我正在尝试使用查询来设置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上看起来像是一些类似的问题，他们改变了奇数行或偶数行的颜色。我不想更改已存在的行的颜色，我只想更改要添加的新行的颜色。

Answer 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');

Answer 2

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

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

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

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

使用jQuery设置备用行的颜色？

2 个答案: