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>