jQuery数据表-如何获取行值



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

在我的本地应用程序(PHP、MySql、Html、Javascript(中,我有一个jQuery数据表,在最后一列中,用户可以通过单击图标来显示(以PDF格式(或删除一行(->使用font真棒(
表中的数据来自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。我在<span data id=cid,data ordid=ordid>。

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

我的问题是我无法在<span>。通过查看(Firefox(调试器,我可以在"(this(-pparentElement:span-dataset:DOMStringMap(2(-cid:25和ordid:223150"下看到它们
尝试过类似"var cid=table1.row($(this(.dataset('cid'("和变体之类的东西,但对我来说都不起作用,不幸的是,我的jQuery知识非常基础。已经搜索了几个小时的答案,但没有找到解决方案

有人能给我指一个正确的方向吗?或者甚至解释一下如何用jQuery在Firefox调试器中看到确切的位置来获取值?

您可以尝试以下代码,您可以在侦听器中接收事件对象,然后从它的父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>

最新更新