如何在 jQuery/JavaScript 中获取行 ID onClick？答案

【问题标题】：How to get the row id onClick in jQuery/JavaScript?如何在 jQuery/JavaScript 中获取行 ID onClick？
【发布时间】：2020-11-25 02:54:09
【问题描述】：

我有一个填充了动态数据的表。最后一列有一个按钮，当我单击该按钮时，我想将行 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>

【问题讨论】：

请添加您的数据表的最小可重现示例。
@AlwaysHelping 你去。我真的不知道还要添加什么，因为这不是我无法弄清楚为什么代码行为不同的错误，而是我什至不知道如何处理的错误。
您的新 id 出现在哪里？它在一个按钮中吗？为了澄清你想获得你点击所在行的id？
@AlwaysHelping 是的，我基本上想要所选行的ID（使用按钮，我不点击行）并将其传递给函数。我需要行 ID，以便我知道以后要更新哪一行，
@AlwaysHelping 知道怎么做吗？

标签： javascript php jquery datatable datatables

【解决方案1】：

这是我的简单回答：


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

$('#table-values').on( 'click', 'tr', function(){
    var id = this.id;

    alert( 'Clicked row id '+id );
  });

简单。 :)

【讨论】：

【解决方案2】：

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

Demo（显示存储为名称的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>

【讨论】：

谢谢，它有效！我如何才能真正更新该行？
@B.S.很高兴听您这么说。对于更新，我会在 ajax 成功时重新考虑，您需要删除该行并将 row.add 与 index 一起使用 - 您还需要动态添加 edit button。
@B.S.您也可以更新相同的内容。是的！但是你需要使用 jQuery .append 或 .html 函数。理想情况下，如果动态添加数据，那么我将删除该行并使用该数据添加新行。
有趣！我不知道我实际上可以使用.html，它使用新数据重置元素。但是，最困难的部分是使用您之前发布的rowindex 对特定行执行 .html()。
@B.S.当然。您需要像这样使用有关 ajax 成功的新数据传递该特定行的索引。 table.row( rowindex ).data( newData ).draw();