如何使用jQuery获取TD单击上的行索引

Question

我试图获取用户单击的单元格的行号和列号给出正确的列号，但行号始终给出0和1

我正在使用以下代码来帮助我找到为什么始终不给行0和1的原因

<script>
 $('td').click(function(){
 col = $(this).parent().children().index($(this));
 row = $(this).parent().parent().children().index($(this).parent());
 alert("row no:"+row+"col no :"+col);
 </script>

Answer 1

您可以简单地使用$(element).index()在同级元素中获取该元素的索引

 $('td').click(function() { var col = $(this).index(), row = $(this).parent().index(); console.log("row index:" + row + ", col index :" + col); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> <td>Item 5</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> <td>Item 5</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> <td>Item 5</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> <td>Item 5</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td> <td>Item 5</td> </tr> </table> 

Answer 2

如果您使用.cellIndex和.rowIndex那么没有jQuery它将更加简单和快捷。

$('td').click(function(){
  var col = this.cellIndex,
      row = this.parentNode.rowIndex;
  alert("row no:"+row+"col no :"+col);

如下面的@PatrickRoberts所述，旧Opera的行为（版本12及更低版本）有所不同，因为它遵循您提供的HTML中的thead/tbody/tfoot顺序，因此，如果将tfoot放在tbody上方（实际上应该在该位置）去），并且它有一个或多个行，则tbody行将偏移那么多。

正确的行为是，无论在何处定义thead ，都在顶部使用thead ，在底部使用tbody 。

这在现代Opera中不再是问题，因为它现在使用Chrome的Webkit分支，因此行为是一致的。

还要注意，假设这里是上下文，jQuery的手动.index()计算将仅考虑给定tbody的子代。