使用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://dev59.com/_HRB5IYBdhLWcg3w6bUE#469910）

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没有背景属性，所以我只是将其添加到了两者中。我认为这可能是我困惑的原因....

- gloomy.penguin

---

使用.each函数和增加一个计数器。 - undefined

对于在活动的tr上使用.next()呢？如果为null，使用parent().children(0)。 - undefined

Answer 1

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

这将为您提供索引。

jsFiddle示例

jsFiddle示例2

顺便说一句，在您的点击函数中，$(this).children("tr").addClass("active"); 中的链接似乎没有任何作用，因为它在搜索行的子行。

- j08691

Answer 2

问题在于“active”类没有添加到“tr”元素中。

在这一行中，您正在查找this的tr子元素，但this是一个tr，因此没有选择任何子元素：$(this).children("tr").addClass("active"); 相反，尝试使用$(this).addClass("active");。

- cfs

---

你能把它放在fiddle上吗？我正在尝试，但仍然返回-1的索引...可能是我放错了位置或者其他什么问题。只需在btn_next点击事件中使用alert将值返回即可。 - undefined

在我的原始答案中出现了一个错误...在我在jsfiddle上玩了一会儿之后，我更新了我的答案。 - undefined

Answer 3

var counter = 0;
var index = -1

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

- Paul Sullivan

---

这不是在查找每个选定的 tr 元素内部的 tr.active 元素吗？ - undefined

我觉得PSCoder大致正确，但我确定有个bug（因为我有点生气）。 - undefined

Answer 4

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

这应该可以做到。

- UnShame

---

这里有些问题，你把类别从 tr 中移除并添加到 td 中。 - undefined

不，我将其从tr.active中删除（tr内部的td），而不是tr.active（为空）。 - undefined

并且它将如何开始，因为最初没有 tr 具有 active class。 - undefined