使用jQuery設置替代行的顏色？

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調用的返回元素如何是具有test ID的div元素。

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

在同一示例中，您可以看到在prepend之后使用first()將css應用於剛插入的元素的解決方法。