用jQuery删除表行最好的方法是什么?


当前回答

如果您正在使用引导表

将此代码片段添加到bootstrap_table.js中

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

然后在你的var allowedMethods = [

添加“removeRow”

最后你可以使用$("#your-table").bootstrapTable('removeRow',{index:1});

本文致谢

其他回答

$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

甚至是更好的

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});

如果您正在使用引导表

将此代码片段添加到bootstrap_table.js中

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

然后在你的var allowedMethods = [

添加“removeRow”

最后你可以使用$("#your-table").bootstrapTable('removeRow',{index:1});

本文致谢

你可以使用:

$($(this).closest("tr"))

用于查找元素的父表行。

它比parent().parent()更优雅,这是我开始做的事情,很快就认识到我的错误。

——编辑 有人指出,这个问题是关于去除这一行的……

$($(this).closest("tr")).remove()

正如下面指出的,你可以简单地做:

$(this).closest('tr').remove();

类似的代码片段可用于许多操作,例如在多个元素上触发事件。

如果你有这样的HTML

<tr>
 <td><span class="spanUser" userid="123"></span></td>
 <td><span class="spanUser" userid="123"></span></td>
</tr>

其中userid="123"是一个自定义属性,可以在构建表时动态填充,

你可以用

  $(".spanUser").live("click", function () {

        var span = $(this);   
        var userid = $(this).attr('userid');

        var currentURL = window.location.protocol + '//' + window.location.host;
        var url = currentURL + "/Account/DeleteUser/" + userid;

        $.post(url, function (data) {
          if (data) {
                   var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
                   var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
                   trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW 
             } else {
                alert('Sorry, there is some error.');
            }
        }); 

     });

在这种情况下,你不知道TR标签的类或id,但无论如何你可以删除它。

function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

也许像这样的东西也能起作用?我还没有尝试过用“this”做什么,所以我不知道它是否有效。