如何在 jQuery/JavaScript 中获取 onClick 的行 id？

Question

我有一个填充动态数据的表。最后一列有一个按钮，当我单击该按钮时，我想将行 ID 传递给 JS 函数。我需要 id，因为我正在执行 POST Ajax 请求，成功后我想获取响应数据并使用新数据更新所选行。这就是我插入新行时要做的事情：var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();但是我该怎么做才能获取行 ID 并使用响应数据更新它呢？编辑。数据表：<table id="myTable" class="display compact" cellspacing="0" width="100%">        <thead>            <tr>                <th>Name</th>                <th>Reg</th>                  <th>Edit</th>                               </tr>        </thead>        <tbody>            <?php foreach (get_all_customers_list() as $user) { ?>                    <tr>                        <td>                            <b> <?php echo $user["recipient_name"]; ?></b>                        </td>                        <td>                            <?php echo $user["registration_date"]; ?>                        </td>                                               <td>                            <button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button>                                                     </td>                    </tr>            <?php }?>        </tbody> </table>

Answer 1

因为您只想获得row id行clicked编辑按钮的。您可以简单地使用函数并传递单击按钮的table.row实际值。tr

演示（显示actual id存储为名称的 (1, 2)）

var table = $('#myTable').DataTable({})

//edit customer here

function edit_customer_request(_this) {

  //Getting the actual table ID

  var row = $(_this).parents('tr')[0];

  //Data table row id

  console.log(table.row(row).data()[0]);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />

<table id="myTable" class="display compact" cellspacing="0" width="100%">

  <thead>

    <tr>

      <th>Name</th>

      <th>Reg</th>

      <th>Edit</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>Tiger Blah</td>

      <td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>

    </tr>tr>

    <tr>

      <td>2</td>

      <td>Blah Nixon</td>

      <td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>

    </tr>

  </tbody>

</table>

演示（显示表的实际索引 - 索引从 0 开始，具体取决于您有多少行）

var table = $('#myTable').DataTable({})

//edit customer here

function edit_customer_request(_this) {

  //get the closest of clicked edit button

  var tr = $(_this).closest("tr");

  //get the index of row

  var rowindex = tr.index();

  //Index of row

  console.log(rowindex)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />

<table id="myTable" class="display compact" cellspacing="0" width="100%">

  <thead>

    <tr>

      <th>Name</th>

      <th>Reg</th>

      <th>Edit</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>Tiger Blah</td>

      <td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>

    </tr>tr>

    <tr>

      <td>2</td>

      <td>Blah Nixon</td>

      <td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>

    </tr>

  </tbody>

</table>

Answer 2

这是我的简单回答：

var table = $('#table-values');

$('#table-values').on( 'click', 'tr', function(){

    var id = this.id;

    alert( 'Clicked row id '+id );

  });

简单的。:)