如何从按钮网格中获取单击按钮的索引？答案

【问题标题】：How to get index of clicked button from the grid of buttons?如何从按钮网格中获取单击按钮的索引？
【发布时间】：2019-04-02 11:13:08
【问题描述】：

这是我的 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>

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

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

【问题讨论】：

标签： javascript jquery indexing html-table

【解决方案1】：

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

您还可以通过将$("table tr button").on('click', function(e) { 替换为$("table").on('click', 'button', function(e) { 来将事件从table 委托给按钮

$("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>

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，您可以简单地使用 index() 方法，例如：

行/表中按钮的索引：

$("table tr button").on('click', function(e) {
  var index_in_row   = $(this).closest('td').index();
  var index_in_table = $('button').index($(this));

  console.log('Index of the button in row: ' + index_in_row);
  console.log('Index of the button in table: ' + index_in_table );
});

<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 0</button></td>
    <td><button class="button">button 1</button></td>
    <td><button class="button">button 2</button></td>
    <td><button class="button">button 3</button></td>
  </tr>
  <tr>
    <td><button class="button">button 4</button></td>
    <td><button class="button">button 5</button></td>
    <td><button class="button">button 6</button></td>
    <td><button class="button">button 7</button></td>
  </tr>
</table>

【讨论】：

认为 OP 正在尝试获取按钮的索引，他说 I was trying to get the index of clicked button.
已更新，因为每个 td 都持有一个按钮，所以按钮的索引是该行中 td 的索引。否则，可以简单地使用$('button').index($(this)) 来获取表格内按钮的索引。
@Ratan 这不是你想要的吗？

【解决方案3】：

您可以将索引值存储在自定义数据属性中，如下所示

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


  <tr>
    <td><button data-index='0' class="button">Click</button></td>
    <td><button data-index='1' class="button">Click</button></td>
    <td><button data-index='2' class="button">Click</button></td>
    <td><button data-index='3' class="button">Click</button></td>

    <td><button data-index='4' class="button">Click</button></td>

    <td><button data-index='5' class="button">Click</button></td>

  </tr>

  <tr>
    <td><button data-index='6' class="button">Click</button></td>
    <td><button data-index='7' class="button">Click</button></td>
    <td><button data-index='8' class="button">Click</button></td>
    <td><button data-index='9' class="button">Click</button></td>

    <td><button data-index='10' class="button">Click</button></td>

    <td><button data-index='11' class="button">Click</button></td>

  </tr>
</table>

然后单击按钮后，您可以像这样通过 jquery 获取索引值

$('.button').click(function(){
    let index = $(this).data('index');

    console.log(index);

});

【讨论】：