使用JQuery切换表的选定行

Using JQuery to switch selected row of table

本文关键字：JQuery 使用      更新时间：2023-09-26

我有一张表。单击某行时，该行将被指定为.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没有背景属性，所以我只是将其添加到两者中。我想这可能是我感到困惑的原因。。。。

问题是没有将"active"类添加到"tr"元素中。

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

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

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

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

会给你索引的。

jsFiddle示例

jsFiddle示例2

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

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

这应该可以做到

相关文章：