使用 JQuery 切换表格的选定行答案

【问题标题】：Using JQuery to switch selected row of table使用 JQuery 切换表格的选定行
【发布时间】：2013-04-05 09:50:41
【问题描述】：

我有一张桌子。单击某行时，会给出.active 并突出显示该行。除了单击它之外，我还需要采用其他方法来更改选定的行。对于我的示例，我选择了下一步按钮。

当它到达表的末尾或其他类似的东西时，我可以做背后的逻辑。

我只需要帮助弄清楚如何获取带有活动类的 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 = 点击函数中的 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 没有背景属性，所以我只是将它添加到两个都。我想这可能是我困惑的原因......

【问题讨论】：

使用 .each 并增加一个计数器
在活动 tr 上使用 .next() 怎么样？如果为空，则 parent().children(0)

标签： javascript jquery html-table css-selectors

【解决方案1】：

问题是“活动”类没有被添加到“tr”元素中。

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

试试$(this).addClass("active");

【讨论】：

你能把它放在小提琴上吗？我正在尝试并且它仍然返回-1的索引......我可能把它放在不好的地方或什么地方。只需在 btn_next 点击的警报中返回值。
我原来的答案有错误...我在 jsfiddle 上玩了一点后更新了我的答案

【解决方案2】：

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

将为您提供索引。

jsFiddle example

jsFiddle example 2

顺便说一句，您的点击函数$(this).children("tr").addClass("active"); 中的链接在搜索一行的子行时似乎什么都不做。

【讨论】：

【解决方案3】：

var counter = 0;
var index = -1

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

【讨论】：

这不是在每个选定的 tr 内寻找 tr.active 元素吗？
我认为这是正确的 PSCoder 但我确定有一个错误（因为我有点生气）

【解决方案4】：

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

应该这样做

【讨论】：

这里出了点问题，你把这个类移到一个tr中，再添加到一个td中。
不，我将其从 tr .active （即 tr 内的 td）中删除，而不是 tr.active （为 null）
以及它将如何开始，因为没有 tr 最初有活动类。