web-dev-qa-db-ja.com

jQueryを使用してテーブル行インデックスを見つける

私はjQueryの中間ユーザーです。 jQUeryを使用してテーブルのrowIndexを見つけることは知っていますが、私のシナリオは異なります。私のテーブル（GridView）は20列で構成され、各列にはテキストボックス、ドロップダウンリスト、画像、ラベルなどのさまざまなコントロールがあります。すべてが各行のサーバー側コントロールです。 gridviewをデータベースのレコードにバインドします。次に、コントロールまたはテキストボックスの変更をクリックすると、変更された列の行のrowIndexを取得する必要があります。これが私が使用したコードです：

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent().attr('sectionRowIndex'));
});

しかし、rowIndexを取得できません。 gridview内でHTMLコントロールを使用すると、rowIndexを取得できます。 gridview内のサーバーコントロールがクリックされたときにrowIndexを見つける方法はありますか？

jqueryindexingrow
15
superachu

これを試して：

var rowIndex = $(this)
    .closest('tr') // Get the closest tr parent element
    .prevAll() // Find all sibling elements in front of it
    .length; // Get their count
44
Darin Dimitrov

sectionRowIndexは_<tr>_要素のプロパティであり、属性ではありません。

サンプルコードを変更する正しい方法は、次のようにゼロインデクサーを使用してjQueryアイテムにアクセスすることです。

_$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent()[0].sectionRowIndex);
});
_

これにより、正しい行インデックスが返されます。また、jQueryの.closest()関数を使用してDOMと.parent()をトラバースする場合は、これら2つを組み合わせて、最も近い_<tr>_要素までトラバースするのもよいでしょう？

_$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('tr')[0].sectionRowIndex);
});
_

これは、親と子の関係が期待どおりではない奇妙なケースも処理します。たとえば、$(this).parent().parent()をチェーンしてから、内部セルを別のdivまたはスパンでラップすることにした場合、関係が台無しになる可能性があります。 .closest()は、常に機能することを確認する簡単な方法です。

もちろん、私のコードサンプルは、上記で提供されたサンプルを再利用しています。まず、より簡単なセレクターでテストして、機能することを確認してから、セレクターを調整することをお勧めします。

9
BenSwayne

これは、変更時のテーブルセルのチェックボックス用です。

 var row = $(this).parent().parent();
 var rowIndex = $(row[0].rowIndex);
 console.log(rowIndex);
4
PruitIgoe

ちょうど使用できるはずです：

var rowIndex = $(this).parents("tr:first")[0].rowIndex;
2
David