jQuery 数据表 - 如何获取行值

Question

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

在我的本地应用程序（PHP、MySql、Html、Javascript）中，我有一个 jQuery 数据表，在最后一列中，用户可以通过单击图标显示（作为 PDF）或删除一行（-> 使用 fontawesome） .
表中的数据来自 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 函数，通过 Ajax 请求对数据库执行所需的操作，但我无法集成从数据表中删除行的功能。

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

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

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

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

Answer 1

你可以试试下面的代码，你可以在 listener 中接收 event 对象，然后从它的 parent span 中获取属性。

  $(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>