Question

我需要从表中的行传递一个值，然后才能从表中删除它。我可以使用以下代码删除一行：

$('#tbl_items').on('click', '#btn_delete', function () {
   $(this).closest('tr').remove();
});

但我需要在实际删除之前先获取值。这就是我创建表格的方式：

if (item.Items != null)
{
    foreach (var itemOnList in item.Items)
    {
        <tr>
            <td>@Html.DisplayFor(model => itemOnList.ItemId)</td>
            <td>@Html.EditorFor(model => itemOnList.ItemName)</td>
            <td>@Html.EditorFor(model => itemOnList.SerialNumber)</td>
            <td>@Html.EditorFor(model => itemOnList.BrandName)</td>
            <td>@Html.EditorFor(model => itemOnList.Quantity)</td>
            <td>@Html.EditorFor(model => itemOnList.Description)</td>
            <td>
                <a href="javascript:void(0);" onclick="editItem(@itemOnList.ItemId)">Edit |</a>
                <a href="javascript:void(0);" onclick="deleteItem(@itemOnList.ItemId)" id="btn_delete">Delete</a>
            </td>
        </tr>
    }
}

我需要有类似于

的代码

$('#tbl_items').on('click', '.btn_delete', function() {
    var self = $(this);

    alert($(this).data('itemid'));
    self.closest('tr').remove();
});

Answer 1

HTML中的标识符必须是唯一的，因此使用Class selector $('.class')来绑定事件处理程序，因为您已经使用不显眼的事件处理程序来摆脱内联单击处理程序。

data-*带前缀的自定义属性可用于使用该元素保留任意数据，可以使用.data(key)检索。

HTML 的

<a href="javascript:void(0);" data-itemid="@itemOnList.ItemId" class="btn_delete">Delete</a>

脚本

$('#tbl_items').on('click', '.btn_delete', function (e) {
    e.preventDefault();
    var self = $(this);
    $.ajax({
       type: 'POST',
       url: '@Url.Action("DeleteItem","Item")?=' + self.data('itemid'),
       success: function(result) {
            if (result === true) {
                 self.closest('tr').remove();
            }
       }
   })
});

注意：我建议您使用<button>代替<a>

Answer 2

如果您已经有权访问该ID，请更改此行$(this).closest('tr').remove();

到$('#' + itemId).closest('tr').remove();

在从JQuery中的表中删除行之前先传递数据

2 个答案: