使用JQuery切换选定的表行

时间:2013-04-12 18:43:59

标签: javascript jquery html-table css-selectors

我有一张桌子。单击某一行时,将显示.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没有背景属性,所以我只是将它添加到都。我想这可能是我混淆的原因......

4 个答案:

答案 0 :(得分:1)

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

在这一行中,您正在寻找tr的{​​{1}}个孩子,但thisthis,因此没有孩子被选中:tr

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

答案 1 :(得分:1)

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

会给你索引。

<强> jsFiddle example

<强> jsFiddle example 2

顺便说一下,点击功能$(this).children("tr").addClass("active");中的链接似乎什么也没做,因为它搜索了一行的子行。

答案 2 :(得分:1)

var counter = 0;
var index = -1

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

答案 3 :(得分:1)

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

这应该做到