jQuery 数据表 - 如何获取行值

Question

这是我在这里的第一个问题，但多年来我一直在向 stackoverflow 学习。

在我的本地应用程序（PHP、MySql、Html、Javascript）中，我有一个 jQuery 数据表，在最后一列中，用户可以显示（作为 PDF 格式）或通过单击字体来删除一行。
表中的数据来自 JSON 文件中的 Ajax。

这是数据表 HTML 代码：

<tbody>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">customer 1</td>
<td class=" dt-body-center">
<a href="javascript:void(showPDF(25,223150,0));"><i class="fa fa-search-plus"></i></a>
<span data-cid="25" data-ordid="223150"><i class="fa fa-trash-alt"></i></span>
</td>
</tr>
...

为了删除行，我以前启动了 Javascript function，并使用 Ajax 请求在数据库上执行所需的操作，但我无法集成从我的数据表中删除行的功能。

然后我改变了我的策略，从触发图标上的点击事件的数据表开始。
有了这个，我能够成功地从数据表（不是数据库）中删除该行。但我无法弄清楚如何获取启动删除操作所需的 ID：我编写了这些 ID（客户 ID，cid : order-id, ordid) in < span data-id=cid。 数据-ordid=ordid>。

var table1 = $('#myTable1').DataTable();
$('#myTable1 tbody').on('click', 'i.fa-trash-alt', function () {
   table1
       .row($(this).parents('tr'))
       .remove()
       .draw();
});

我的问题是我无法在 <span> 中获取 ID。 查看（Firefox）调试器，我可以在“（this）-parentElement：span-dataset：DOMStringMap（2）-cid：25和ordid：223150”下看到它们。
尝试过类似：“var cid = table1.row($(this).dataset('cid')”和变体，但对我没有任何作用，不幸的是我的 jQuery 知识非常基础。现在已经搜索了几个小时的答案，但没有找不到解决办法。

有人可以指出我正确的方向，或者甚至给出一些解释如何使用 jQuery 在 Firefox 调试器中看到确切的 position 来获取值吗？

Answer 1

您可以尝试以下代码，您可以在侦听器中接收事件 object ，然后从其父跨度获取属性。

 $(document).ready(function(){ var table1 = $('#myTable1').DataTable(); $('#myTable1 tbody').on('click', 'i.fa-trash-alt', function (e) { //you can get ids from parent span attribute like: var cId = e.target.parentNode.attributes['data-cid'].value; var ordId = e.target.parentNode.attributes['data-ordid'].value alert(cId); table1.row($(this).parents('tr')).remove().draw(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <table id="myTable1"> <thead> <tr> <th>title-1</th> <th>title-2</th> <th>Remove</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="sorting_1" tabindex="0">customer 1</td> <td class=" dt-body-center"> another column </td> <td><span data-cid="25" data-ordid="223150"><i class="fa-trash-alt">Delete</i></span></td> </tr> </tbody> </table>