[英]I have a button in each row of a table: How can the OnClick handler tell which row it was called from?
The goal: ,, 目标:
So I've got a Table (Which is initialized as a JQuery DataTable). 因此,我有了一个表(将其初始化为JQuery DataTable)。 Each row contains a 'remove me' button, and when that button is pressed, I want to delete the row from the current table. 每行都包含一个“删除我”按钮,当按下该按钮时,我想从当前表中删除该行。
What I've tried: 我尝试过的
tr = $(this).closest('tr');
$('.my-table-class').dataTable().fnDeleteRow(tr);
What happens 怎么了
No matter what row I click on, the last row is deleted from the table is deleted, except if there's only one row in the table, in this situation a javascript error: "TypeError: j is undefined" is thrown from Jquery.dataTable.min.js. 无论我单击哪一行,都将删除表中的最后一行, 除非表中只有一行,在这种情况下,会从Jquery.dataTable抛出javascript错误:“ TypeError:j is undefined”。 min.js. Both baffle me. 两者都使我困惑。
I can get the attributes of the right row - for example, If do something like: alert($(this).attr("data-name"));
我可以获取右行的属性 -例如,如果执行以下操作: alert($(this).attr("data-name"));
I click on John Smith's row, I'll see 'John Smith' in an alert box... so $(this) is the a
tag, so why doesn't the .closest() method grab the right tr
tag? 我单击John Smith的行,在警报框中看到“ John Smith”……所以$(this)是a
标记,那么.closest()方法为什么不抓住正确的tr
标记?
My Questions: 我的问题:
How do I get 'this' row (the one which contained the button which was pressed) in order to delete it? 我如何获得“此”行(包含被按下的按钮的行)以将其删除?
Any idea what's causing the 'TypeError: j is undefined" error when there's only one row in the table? 当表中只有一行时,您知道是什么原因导致“ TypeError:j未定义”错误吗?
Details: 细节:
Here's the rendered (from .jsp) HTML table: 这是呈现的(来自.jsp)HTML表:
<table class="table my-table-class">
<thead><tr><th>Name</th><th> </th></tr></thead>
<tbody>
<tr>
<td>John Smith</td>
<td><a href="javascript://" class="my-button-class" data-name="John Smith"><i class="icon-plus"></i></a></td>
</tr>
<tr>
<td>Robert Paulson</td>
<td><a href="javascript://" class="my-button-class" data-name="Robert Paulson"><i class="icon-plus"></i></a></td>
</tr>
<tr>
<td>Juan Sanchez</td>
<td><a href="javascript://" class="my-button-class" data-name="Juan Sanchez"><i class="icon-plus"></i></a></td>
</tr>
</tbody>
Here's how I initialize the tables as a Jquery DataTable: 这是将表初始化为Jquery DataTable的方法:
$('.st-my-table-class').dataTable( {
"bInfo": true,
"aaSorting": [[ 0, "desc" ]], // sort 1st column
"bFilter": true, // allow search bar
"bPaginate": false, // no pagination
"sDom": '<"top"f>rt<"bottom"lp><"clear">' // (f)ilter bar on top, page (i)nfo omitted
} );
And here's the whole event handler: 这是整个事件处理程序:
$('.my-button-class').on("click", function(){
tr = $(this).closest('tr');
$('.my-table-class').dataTable().fnDeleteRow(tr);
});
I think This JSFIDDLE is much closer to what you wanted. 我认为这个JSFIDDLE与您想要的东西更加接近。 Here is the basic code 这是基本代码
$(function() {
var dataTable = $('.my-table-class').dataTable();
$( ".test" ).click(function() {
var row = $(this).closest('tr');
var nRow = row[0];
dataTable.dataTable().fnDeleteRow(nRow);
});
});
which I pulled from this resource here that explains in full detail on how it works. 这是我从这个资源拉到这里 ,在充分详细说明了它是如何工作的。 In short you need to select the node itself not the jQuery object. 简而言之,您需要选择节点本身而不是jQuery对象。 You can also use .first
like so. 您也可以像这样使用.first
。
$( ".test" ).click(function() {
var row = $(this).closest('tr').first();
dataTable.dataTable().fnDeleteRow(row);
Note: I added the "This" text as I don't have the button style/icon. 注意:我添加了“ This”文本,因为我没有按钮样式/图标。
As @Dawn suggested, you're passing a jQuery element to fnDeleteRow
, which is expecting a HTML node. 正如@Dawn所建议的那样,您正在将jQuery元素传递给fnDeleteRow
,该元素需要一个HTML节点。
Simply try: 只需尝试:
$('.my-button-class').on("click", function () {
tr = $(this).closest('tr').get(0); // gets the HTML node
$('.my-table-class').dataTable().fnDeleteRow(tr);
});
Working JSFiddle: http://jsfiddle.net/so4s67b0/ 工作的JSFiddle: http : //jsfiddle.net/so4s67b0/
First of all in the function it is need to declare a variable and assign our data table to it. 首先,在函数中需要声明一个变量并为其分配数据表。 Then take the selected row's index into another variable. 然后将所选行的索引放入另一个变量。 After that remove the selected row from the data table. 之后,从数据表中删除选定的行。 .draw(false) will be manage the pagination and no of rows properties in jquery DataTable. .draw(false)将管理分页和jquery DataTable中的行属性。
$('.my-button-class').click(function () {
var tbl = $('.my-table-class').DataTable();
var index = tbl.row(this).index();
var row = $(this).closest("tr").get(index);
tbl.row(index).remove().draw(false);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.