javascript - 使用 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"); （this = 在 click 函数中点击了 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”元素中。

在这一行中，您正在寻找, 但是是 a 的tr孩子，因此没有孩子被选中：thisthistr$(this).children("tr").addClass("active");

而是尝试$(this).addClass("active");

Answer 2

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

会给你索引。

jsFiddle 示例

jsFiddle 示例 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');

这应该这样做