jQuery更改所有tr類後指定一個

我有一個交替行的背景顏色的數據表。我有一個AJAX腳本來刪除一行。我不能想出一種方法來改變被刪除的行下的所有行的類，以便它再次正確地交替。jQuery更改所有tr類後指定一個

例如，考慮以下幾點：

`<tr id="1" class="row1"> 
    <td>blah</td> 
</tr> 
<tr id="2" class="row2"> 
    <td>blah</td> 
</tr> 
<tr id="3" class="row1"> 
    <td>blah</td> 
</tr> 
<tr id="4" class="row2"> 
    <td>blah</td> 
</tr>`

現在，用我的AJAX腳本，我刪除ID2，ID3然後將ID1下方移動，他們將有相同的行顏色。我設法讓我的腳本改變下一個tr類，但那並沒有真正的幫助，因爲那樣它就跟那個之後的那個顏色一樣。我無法弄清楚如何遍歷所有下一個tr，並相應地改變它們的類。

我到目前爲止有：

$('#news_' + id).fadeOut('slow'); 

var currtr = $('#news_' + id).attr('class'); 
var nexttr = $('#news_' + id).closest('tr').next('tr').attr('id'); 

$('#' + nexttr).removeClass($('#' + nexttr).attr('class')); 
$('#' + nexttr).addClass(currtr);

來源

2010-10-04 Scott

你可以只遍歷可見<tr>元素，從甚至是那些刪除類，並適用於奇的。

事情是這樣的：

例子：http://jsfiddle.net/2CZdT/

$('tr:odd').addClass('odd'); 

$('td').click(function() { 
    $(this).parent().fadeOut(function() { 
     $(this).siblings('tr:visible').filter(':even').removeClass('odd') 
      .end().filter(':odd').addClass('odd'); 
    }); 
});

我有click事件上<td>，所以被點擊時一個，它遍歷到父<tr>元素，淡化它在回調中，它抓取所有可見兄弟<tr>元素，過濾偶數，刪除.odd類，然後返回並過濾奇數元素，並添加了.odd類。

請注意，這假設在您的CSS中應用了一個默認類，然後使用交替類覆蓋奇數類（或甚至一個）。

來源

2010-10-04 01:09:21 user113716

最簡單的方法就是去在整個表再次，例如在淡出後補充一點：

$('#id_of_your_table tr:even').addClass('even');

編輯：關於第二個想法，這是行不通的，因爲你褪色的行仍然存在，只是不可見。您需要將其從DOM中刪除，或者在重新應用斑馬紋效果時跳過它。例如：

$('#news_' + id) 
    .fadeOut('slow') 
    .remove() 
    .closest('table') 
    .find('tr:even').addClass('even');

或者：

$('#news_' + id) 
    .fadeOut('slow') 
    .addClass('skip') 
    .closest('table') 
    .find('tr:not(.skip):even').addClass('even');

您也可以將表格直接作爲第一個例子，但你不妨從褪色的行向上移至表其

來源

2010-10-04 00:49:26 Alec

$（ '＃快訊_' + id）的.fadeOut（ '慢'）; $（'＃news_table tr td：even'）。addClass（'row2'）; 不做任何事情。 – Scott 2010-10-04 00:55:26

對不起，我針對'td'而不是'tr';已經編輯它。嘗試'$（'＃news_table tr：even'）。addClass（'row2'）;'（或'：odd'，取決於你想如何開始斑馬效應）。 – Alec 2010-10-04 01:06:40

您可以使用next siblings selector獲取要刪除的行後面的所有行。刪除所需的行。那麼，你應該已經有了以下兄弟姐妹，所以只需.each（）他們並改變他們的班級。

E.g.

var followingRows = $("#id2 ~ tr"); 
$("#id2").remove(); 
followingRows.each(function() { 
    if (this.is('.even') 
     this.removeClass('even').addClass('odd'); 
    else 
     this.removeClass('odd').addClass('even'); 
});

東西接近......

來源

2010-10-04 00:56:59 kafuchau

哦，我想把.remove（）更改爲您選擇的行上的淡出（）。 – kafuchau 2010-10-04 01:10:51

讓CSS爲你做好工作。

table tr:nth-child(2n+1) { 
    background-color: #eef; 
}

無JavaScript需要！ =）

來源

2010-10-04 01:34:29 mkoistinen

我會做這樣的事情：

$('news_' + id).fadeOut('slow', function() { 
    $(this).remove(); 
}); 
var i = 1; 
$('tr').removeClass().each(function() { 
    if (i == 1) { 
     $(this).addClass('row' + i); 
     i++; 
    } else { 
     $(this).addClass('row' + i); 
     i--; 
    } 
});

來源

2010-10-04 03:23:06 Marcus

jQuery更改所有tr類後指定一個

回答

相關問題