jQueryのテーブルの行と列の番号


141

jQueryを使用して、クリックしたテーブルセルの行番号と列番号を取得するにはどうすればよいですか。

$("td").onClick(function(event){
   var row = ...
   var col = ...
});

回答:


216

特定のコンテキストでCore / index関数を使用できます。たとえば、親TRのTDのインデックスを確認して列番号を取得したり、テーブルのTRインデックスを確認して行番号を取得したりできます。

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

ここで実行中の例を確認してください


列のスパン@gromで失敗するのはなぜですか?
EarlyPoster 2011年

@Forkrul襲撃は、それがで失敗です@CMS ROWSPAN's jsbin.com/eyeyu/1099/edit#previewテキストでのセルをクリックして「12」。列のインデックスは4で
AndrewD。

変数「data」にいくつかのデータがあります.....この「データ」をこの列と行の値でテーブルに追加することはできますか
Shanish

2
ROWSPANとCOLSPANの回避策:SPANを使用するとクリックが機能する jsbin.com/eyeyu/1307/edit
eddyparkinson

9
var row = $(this).closest('tr').index()
SpYk3HH 2015年



21

私の頭の上から、1つの方法は、以前のすべての要素を取得してそれらを数えることです。

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});

6

テーブルを作成するときに、そのデータをセルに出力できますか?

したがって、テーブルは次のようになります。

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

その後、それは簡単な問題になります

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}

1
これらの属性はどのHTML仕様に準拠していますか?見つけられないようです。
サマンサブラナム

5
接頭辞「data-」で始まるカスタム属性を許可するHTML仕様5。
Chris Brandsma

それらが仕様に含まれていなくても、古いブラウザを壊すことはありません<HTML5
Daniel Powell

1
$(this).data( 'row');を呼び出すだけで「データ」フィールドにアクセスできます。
WhiteAngel 2015年

0

クリックハンドラーをテーブル全体にバインドし、event.targetを使用してクリックされたTDを取得することをお勧めします。1:20 amとしてこれに追加できるすべてのこと


これは問題を解決するための貴重なヒントになるかもしれませんが、良い答えも解決策を示しています。意味を示すサンプルコードを提供するように編集してください。または、これをコメントとして書くことを検討してください。
Toby Speight 2017年

1
おかげで、私は別の10年間で、この答えの見直しを検討する
mkoryak
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.