如何在按钮的onClick上获取行的索引？

问题描述

当我单击数据表中某行的按钮时，我试图获取行索引，但不是获取真实索引，而是获取显示的索引。当我添加新行，然后单击该行的按钮时，就会发生这种情况。表的顺序是按时间戳记的，因此当我单击按钮时，新行立即移到该行的顶部，索引为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。

解决方法

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

,

我认为您正在寻找这样的东西：

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","Age": 22 },{ "Id": "5","Name": "Airi Satou","Age": 33 },{ "Id": "6","Name": "Brielle Williamson","Position": "Integration Specialist","Office": "New York",{ "Id": "7","Name": "Herrod Chandler","Position": "Sales Assistant","Age": 59 },{ "Id": "8","Name": "Rhona Davidson","Age": 55 },{ "Id": "9","Name": "Colleen Hurst","Position": "Javascript Developer","Age": 39 },{ "Id": "10","Name": "Sonya Frost","Position": "Software Engineer","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（与数组中的相同）

快乐编码！