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の例のようなものはどうですか？

この例には、1列と10行のテーブルがあります。<td>セルは、選択したセルがクラスを持つすべての要素can_be_selectedです。上下の矢印キーを使用するcan_be_selectedと、他のセルを無視して、クラスのセルのみを強調表示できます。この例では、クラスを持つセルにcan_be_selected緑色の境界線を付けて区別できるようにしていますが、これは簡単に削除できます。

これは、同じコードを使用した2番目の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

1つのオプションは、nextUntilメソッドを使用してすべての「役に立たない」行をスキップすることです。

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

デモ：http： //jsfiddle.net/y8Dqq/

于 2012-05-07T21:28:37.770 に答える