Question

目标： ,,

所以我有一个表（它被初始化为JQuery DataTable）。每行包含一个“删除我”按钮，当按下该按钮时，我想删除当前表中的行。

我尝试了什么：

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

会发生什么

无论我点击哪一行，从表中删除的最后一行都被删除，除了如果表中只有一行，在这种情况下是一个javascript错误：“TypeError：j是未定义的“是从Jquery.dataTable.min.js抛出的。两个人都困惑我。

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

我的问题：

我如何获取'this'行（包含按下按钮的行）才能将其删除？
当表中只有一行时，知道是什么导致'TypeError：j is undefined“错误？

详细信息：

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

我认为This JSFIDDLE更接近你想要的。这是基本代码

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

我从这个资源here中提取，详细解释了它的工作原理。简而言之，您需要选择节点本身而不是jQuery对象。你也可以这样使用.first。

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

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

Answer 2

正如@Dawn建议的那样，您将jQuery元素传递给期望HTML节点的fnDeleteRow。

只需尝试：

$('.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中的分页属性和no属性。

    $('.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);

    });

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

3 个答案: