javascript - 如何从按钮网格中获取点击按钮的索引？

Question

这是我的 HTML...

$("table tr button").on('click', function(e) {
  var i = $(this).closest('td').parent()[0].sectionRowIndex;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab">


  <tr>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

  </tr>

  <tr>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

  </tr>
</table>

我试图获取点击按钮的索引。

但我收到一个错误...请有人告诉我该怎么做。

Answer 1

您可以使用 jquery 中的 closest 和 index。每行都有一个从 0 开始的索引，按钮的索引将相对于该行。

您还可以将 table 中的事件委托(delegate)给按钮，方法是将 $("table tr button").on('click', function(e) { 替换为$("table").on('点击', '按钮', function(e) {

$("table").on('click', 'button', function(e) {
  var rowIndex = $(this).closest('tr').index();
  var colIndex = $(this).closest('td').index()
  console.log(`Row index is ${rowIndex} & button index is ${colIndex}`)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab">


  <tr>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

  </tr>

  <tr>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

  </tr>
</table>