0

我有一个表，其中包含具有不同类名的行。其中一些行具有相同的类名。我正在尝试选择包含特定类的下一个表行（使用 jQuery）。基本上，我正在尝试创建一个功能，用户可以使用箭头键选择表中的下一行。这是我正在使用的代码：

if (e.keyCode == 40)
{ 
   $('tr.background_color_grey').next("tr").addClass("background_color_grey");
   $('tr.background_color_grey:first').removeClass("background_color_grey");
   return false;
}

问题是我需要跳过一些行（它们充当表中不同类别的标题）。那么，如果它具有特定的类，我如何选择表中的下一行？我想被选中的所有行都有“can_be_selected”类。谢谢你的帮助！

4

3 回答 3

3

在您使用.next("tr")

尝试.next("tr.can_be_selected")

于 2012-05-07T21:23:36.100 回答
1

像这样的 jsFiddle 示例怎么样？

该示例有一个包含一列和 10 行的表。<td>单元格是所选单元格具有类的所有元素can_be_selected。通过使用向上和向下箭头键，您可以仅突出显示具有该类can_be_selected的单元格，而忽略其他单元格。请注意，在示例中，我为具有类的单元格设置can_be_selected了绿色边框以使它们不同，但您可以轻松删除它。

这是使用相同代码的第二个 jsFiddle 示例，其中表格行已替换为表格单元格。

jQuery（对于第一个 jsFiddle 示例）：

var index = -1;
//38 up, 40down
$(document).keydown(function(e) {
    if (e.keyCode === 40) {
        index = (index + 1 >= $('td.can_be_selected').length) ? $('td.can_be_selected').length - 1 : index + 1;
        $('td.can_be_selected').removeClass('background_color_grey');
        $('td.can_be_selected:eq(' + index + ')').addClass('background_color_grey');
        return false;
    }
    if (e.keyCode === 38) {
        index = (index == 0) ? 0 : index - 1;
        $('td.can_be_selected').removeClass('background_color_grey');
        $('td.can_be_selected:eq(' + index + ')').addClass('background_color_grey');
        return false;
    }
});​
于 2012-05-08T19:57:56.823 回答
0

一种选择是使用nextUntil方法跳过所有“无用”行：

$("tr").eq($("tr.selected").nextUntil(".can_be_selected​​​​​​​​​​​").next().index());

演示：http: //jsfiddle.net/y8Dqq/

于 2012-05-07T21:28:37.770 回答