點擊行後，從其他行中刪除seletced類

Question

我有一個小問題，我的JQuery代碼。

我在HTML中創建了簡單的表格。

<table class="table"> 
<tr> 
    <th>Name</th> 
    <th>Surname</th> 
    <th></th> 
</tr> 
<tr> 
    <td>name 1</td> 
    <td>surname 1</td> 
    <td>actions</td> 
</tr> 
<tr> 
    <td>name 2</td> 
    <td>surname 3</td> 
    <td>actions</td> 
</tr> 
</table> 

然後我想強調的黃色row，當我點擊這個row 所以，當我點擊row添加類「selected」但是當我點擊另一個row我不得不刪除「selected」上一行的類。於是，我就在環刪除「selected」類中創建JQuery的行動

$('tr').not(':first').click(function() { 
    var table = $(this).closest("table"); 
    var rows = table.children("tr"); 
    alert(rows.length); 
    rows.each(function() { 
     $(this).removeClass("selected"); 
    }); 

    $(this).addClass('selected'); 
}); 

我試圖找到最接近的表從這個點擊row，並得到所有的孩子<tr>， 旁邊並添加點擊row這個類。

但總是alert(rows.length)返回我0 row S：<

請幫助我。

謝謝。

Answer 1

何不乾脆

$('tr').not(':first').click(function() { 
    $(this).addClass("selected"); //add class selected to current clicked row 
    $(this).siblings().removeClass("selected"); //remove class selected from rest of the rows 
}); 

Answer 2

這樣寫：

$('.table tr').not(':first').on('click', function(){ 
$('.table tr').removeClass('selected'); 
$(this).addClass('selected'); 
}); 

根據您的問題，這樣寫：

var rows = $(this).siblings("tr"); 

相反的：

var rows = table.siblings("tr"); 

Answer 3

首先從選定的類中刪除類，然後將類添加到新的類中。

$('tr').not(':first').click(function() { 

    $('tr.selected').removeClass("selected"); 

    $(this).addClass('selected'); 
});