我在表的每一行中都有一个按钮：OnClick处理程序如何分辨从哪一行调用它？

Question

目标：

因此，我有了一个表（将其初始化为JQuery DataTable）。 每行都包含一个“删除我”按钮，当按下该按钮时，我想从当前表中删除该行。

我尝试过的

tr = $(this).closest('tr');
$('.my-table-class').dataTable().fnDeleteRow(tr);

怎么了

无论我单击哪一行，都将删除表中的最后一行， 除非表中只有一行，在这种情况下，会从Jquery.dataTable抛出javascript错误：“ TypeError：j is undefined”。 min.js. 两者都使我困惑。

我可以获取右行的属性 -例如，如果执行以下操作： alert($(this).attr("data-name")); 我单击John Smith的行，在警报框中看到“ John Smith”……所以$（this）是a标记，那么.closest（）方法为什么不抓住正确的tr标记？

我的问题：

• 我如何获得“此”行（包含被按下的按钮的行）以将其删除？

• 当表中只有一行时，您知道是什么原因导致“ TypeError：j未定义”错误吗？

细节：

这是呈现的（来自.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>

这是将表初始化为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
        } );

这是整个事件处理程序：

$('.my-button-class').on("click", function(){ 
tr = $(this).closest('tr'); 
$('.my-table-class').dataTable().fnDeleteRow(tr);
});

Answer 1

我认为这个JSFIDDLE与您想要的东西更加接近。 这是基本代码

$(function() {
      var dataTable = $('.my-table-class').dataTable();
      $( ".test" ).click(function() {
           var row = $(this).closest('tr'); 
           var nRow = row[0];
           dataTable.dataTable().fnDeleteRow(nRow);
      });     
});

这是我从这个资源拉到这里 ，在充分详细说明了它是如何工作的。 简而言之，您需要选择节点本身而不是jQuery对象。 您也可以像这样使用.first 。

$( ".test" ).click(function() {
     var row = $(this).closest('tr').first(); 
     dataTable.dataTable().fnDeleteRow(row);

注意：我添加了“ This”文本，因为我没有按钮样式/图标。

Answer 2

正如@Dawn所建议的那样，您正在将jQuery元素传递给fnDeleteRow ，该元素需要一个HTML节点。

只需尝试：

$('.my-button-class').on("click", function () {
    tr = $(this).closest('tr').get(0); // gets the HTML node
    $('.my-table-class').dataTable().fnDeleteRow(tr);
});

工作的JSFiddle： http ： //jsfiddle.net/so4s67b0/

Answer 3

首先，在函数中需要声明一个变量并为其分配数据表。 然后将所选行的索引放入另一个变量。 之后，从数据表中删除选定的行。 .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);

    });