使用JQuery來切換表的選定行

Question

我有一張表。當單擊一行時，會給出.active，並且該行突出顯示。我需要通過其他方式來改變選中的行，而不是點擊它。對於我的例子，我選擇了下一個按鈕。

http://jsfiddle.net/dHxKW/

我能做到後面時，得到表或其他任何類似的結束會發生什麼邏輯。

我只是需要幫助搞清楚如何獲得類的活動 TR的索引，以便我可以增加索引，然後我可以給下一行活動類......這就是我需要的做...如何獲得該行索引。

這是一些的東西，我已經試過了不行......

alert($('table tr .active').index()); 

    var row = $('table tr.active').first(); 

    alert(row.index()); 

    alert($("table").index($('table tr .active'))); 

這是我用什麼作爲參照（https://stackoverflow.com/a/469910/623952）

var index = $("table tr").index($(this)); 

但我不能得到正確的選擇...

解決方案.....

它會從來沒有工作過...我寫的不好的代碼：

$(this).children("tr").addClass("active");（此=點擊TR的點擊功能）

但新代碼： http://jsfiddle.net/dHxKW

$("#table_one").on("click", "tr", function() { 
    $(".active").removeClass("active"); 

    $(this).children("td").addClass("active"); 

    // removed line: $(this).children("tr").addClass("active"); 
    $(this).addClass("active"); 
}); 

$('#btn_next').on('click', function() 
{ 
    // right here ********** 

    var n = $('tr.active').next(); 

    $(".active").removeClass("active");  

    n.children("td").addClass("active"); 
    n.addClass("active"); 

}); 

**就像說明一樣，我將這個類添加到tr和td中......我不確定這是否是最好的方法，但是tr沒有背景屬性，所以我只是將它添加到了兩者中。我認爲這可能是我的困惑的原因....

Answer 1

問題是「活動」類沒有被添加到「tr」元素。

在這一行你正在尋找的thistr孩子，但this是tr，因此沒有得到孩子選擇：$(this).children("tr").addClass("active");

而是嘗試$(this).addClass("active");

Answer 2

$('td.active').parent().index('tr') 

將讓你的索引。

jsFiddle example

jsFiddle example 2

順便說一句，在你點擊功能$(this).children("tr").addClass("active");的鏈接似乎什麼也不做，因爲它搜索一個行的子行。

Answer 3

var counter = 0; 
var index = -1 

$('table tr').each(function(){ 
    if(! $(this).hasClass('active')) { 
     counter++; 
    } 
    else index = counter; 
}) 

Answer 4

$('table tr .active').removeClass('active').parent().next().children('td').addClass('active'); 

這應該這樣做