asp.net-mvc-2 - 使用jquery从动态html表中删除一行

Question

我已将 View 中的一些数据保存到数据库中，并在我的 asp.net mvc 应用程序中使用 jquery 将其添加到动态创建的 html 表中。下面给出了脚本。

$(document).ready(function() {
    var attributetable = [];
    $("#AddAttrib").click(function(event) {
        event.preventDefault();
        $("#AttributeList").show();
        var attribute = $("#Attribute").val();
        var attributename = $("#Attribute option:selected").text();
        var documentId = $("#DocumentId").val();
        var instructionId = $("#InstructionId").val();

        var attributevalue = $("#text1").val();
        attributetable.push({
            attribute: attribute,
            attributevalue: attributevalue
        });
        var row = $("<tr></tr>");

        var contents = '<tr><td>' + attribute + '</td><td>' + attributename + '</td><td>' + attributevalue + '</td><td><a id="delete" href="#">Delete</a></td></tr>';
        $("#AttributeList").append(contents);

        var jsonToPost = {};
        jsonToPost.attribute = attribute;
        jsonToPost.attributename = attributename;
        jsonToPost.attributevalue = attributevalue;
        jsonToPost.documentId = documentId;
        jsonToPost.instructionId = instructionId;

        jsonToPostString = JSON.stringify(jsonToPost);
        alert(jsonToPostString);
        $.post("/Instruction/CreateInstnAttribute", { data: jsonToPostString });
    });

我需要在单击“删除”时删除该行。要求是在单击删除链接时删除该行。我怎样才能实现它？ 感谢您之前的所有帮助。

Answer 1

您似乎正在使用 "delete"多行的 ID。那是无效的。 ID 必须是唯一的。它应该是一个类。

<td><a class="delete" href="#">Delete</a></td>

那么如果AttributeList是你的<table> ，您可以放置​​ a .delegate() 其上的处理程序来处理 <a> 上的点击具有类 "delete" 的元素.

$("#AttributeList").delegate('a.delete', 'click', function( e ) {
    e.preventDefault();
    $(this).closest('tr').remove();
});

将其放入您的 $(document).ready() 中打电话。

这个uses .closest() 获取最近的<tr>祖先，then .remove() 删除该行。

它还有uses e.preventDefault() 禁用 <a> 的默认行为元素。