使用jquery从动态html表中删除一行

时间:2010-11-09 12:43:21

标签: asp.net-mvc-2 jquery jquery-selectors

我已经从视图中保存了一些数据到数据库,并在我的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 });
    });

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

1 个答案:

答案 0 :(得分:4)

好像您将"delete" ID用于多行。那是无效的。 ID必须是唯一的。它应该是一个类。

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

如果AttributeList是您的<table>,则可以在其上放置a .delegate()处理程序,以处理对具有类<a>的{​​{1}}元素的点击。

"delete"

将其放入$("#AttributeList").delegate('a.delete', 'click', function( e ) { e.preventDefault(); $(this).closest('tr').remove(); }); 来电。

uses .closest()获取最近的$(document).ready()祖先,then .remove()以删除该行。

uses e.preventDefault()禁用<tr>元素的默认行为。