如何获取按钮的onClick行的索引？答案

【问题标题】：How to get the index of the row onClick of a button?如何获取按钮的onClick行的索引？
【发布时间】：2020-08-11 14:43:02
【问题描述】：

当我单击数据表中一行的按钮时，我试图获取行索引，但我没有获取实际索引，而是获取了显示的索引。当我添加一个新行然后单击该行的按钮时，就会发生这种情况。表格的顺序是时间戳，所以当我点击它给我索引 0 的按钮时，新行会立即进入顶部，但这只是显示的表格索引，而不是真正的索引。

function myFunction(this_) {
  var tr = $(this_).closest("tr");
  rowindex = tr.index();  //this gives the displayed index of the row, NOT the real index
}

从 html 数据表按钮调用此函数：

<td>
  <button type="button" id="edit_button" onclick='myFunction(this)' name="edit_button">Edit</button>
</td>

更新：添加新行时，我尝试打印所有行的索引：

   table.rows().every( function () {
     console.log(this.index());
  });

它给出了正确的索引，所以它打印如下：

5 2 3 4

如您所见，索引 5 是第一个，因为由于我使用的顺序/过滤，它显示在第一行。

简单地说，当我点击第一行的按钮时，它不是给我索引 5，而是给我 0。

【问题讨论】：

“显示索引”和“实际索引”是什么意思？返回的索引将基于包含tbody 中的tr 元素的数量，无论它们是否显示。
@RoryMcCrossan 我所听到的显示索引是显示行的索引，因此根据排序或过滤，第一行可能具有索引 7，但它会给出 0，因为它显示为表中的第一行。这正是我遇到的问题。
抱歉，我还是没明白你的意思。如果该行首先显示在表格中，那么它将始终是索引 0。为什么您认为在您的示例中它会是索引 7？
@RoryMcCrossan 看到更新的问题，也许它澄清了一点
@RoryMcCrossan 也许它甚至不是一个索引，只是行号，如果我在这里使用了错误的语法，很抱歉。因此，与其调用“显示的索引”，不如将其称为行号。

标签： jquery datatable

【解决方案1】：

在 tr 元素上，只需添加一个属性，如“id”或任何名称，即可设置您的行号。这样您就可以操作该行。

【讨论】：

【解决方案2】：

var jsonData = [ 
    { "Id": "1", "Name": "Tiger Nixon", "Position": "System Architect", "Office": "Edinburgh", "Age": 61 },
  { "Id": "2", "Name": "Garrett Winters", "Position": "Accountant", "Office": "Tokyo", "Age": 63 },
  { "Id": "3", "Name": "Ashton Cox", "Position": "Jr. Technical Author", "Office": "San Francisco", "Age": 66 },
  { "Id": "4", "Name": "Cedric Kelly", "Position": "Sr. Javascript Developer", "Office": "Edinburgh", "Age": 22 },
  { "Id": "5", "Name": "Airi Satou", "Position": "Accountant", "Office": "Tokyo", "Age": 33 },
  { "Id": "6", "Name": "Brielle Williamson", "Position": "Integration Specialist", "Office": "New York", "Age": 61 },
  { "Id": "7", "Name": "Herrod Chandler", "Position": "Sales Assistant", "Office": "San Francisco", "Age": 59 },
  { "Id": "8", "Name": "Rhona Davidson", "Position": "Integration Specialist", "Office": "Tokyo", "Age": 55 },
  { "Id": "9", "Name": "Colleen Hurst", "Position": "Javascript Developer", "Office": "San Francisco", "Age": 39 },
  { "Id": "10", "Name": "Sonya Frost", "Position": "Software Engineer", "Office": "Edinburgh", "Age": 23 } ];

var table = $('#example').DataTable({
  LengthChange: false,
  data: jsonData,
  columns: [
      { data: 'Id' },
      { data: 'Name' },
      { data: 'Position' },
      { data: 'Office' },
      { data: 'Age' },
      { 
        data: null,
        orderable: false,
        searchable: false,
        render: function(data, type, full, meta) {
           return '<button onClick="showIndex(' + meta.row + ')">Click me</button>';
        }
      },
    ]
});

function showIndex(index) {
        alert(index);
}

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="example" class="table display" style="width:100%">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th></th>
    </tr>
  </thead>
</table>

请记住，如果您单击 Id 为 1 的行的按钮并得到 0（零），是因为在 jQuery DataTable 内部，第一行索引是 0 而不是 1（与数组中相同）

【讨论】：