使用jquery從動態html表中刪除一行

我從視圖中保存了一些數據到數據庫，並將其添加到我的asp.net mvc應用程序中使用jquery動態創建的html表。腳本如下。使用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 }); 
    });

當單擊「刪除」時需要刪除該行。要求是在點擊刪除鏈接時刪除該行。我怎麼能實現它？感謝您在之前的所有幫助。

來源

2010-11-09 Suja Shyam

看起來好像您對多行使用"delete" ID。這是無效的。 ID必須是唯一的。它應該是一個班級。

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

那麼如果AttributeList是你<table>，你可以在其上放置a .delegate()處理程序來處理在具有類"delete"的<a>元素的點擊次數。

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

將此放入您的$(document).ready()調用中。

這uses .closest()以獲得其最接近的<tr>始祖，then .remove()刪除該行。

它也uses e.preventDefault()禁用<a>元素的默認行爲。

來源

2010-11-09 12:49:45 user113716

謝謝帕特里克。但是當視圖加載時出現此錯誤 Microsoft JScript運行時錯誤：對象不支持此屬性或方法 – 2010-11-10 04:33:12

@Suja - 您使用的是哪個版本的jQuery？委託方法在1.4.2版本中引入。如果您使用的是舊版本，則會出現該錯誤。 – user113716 2010-11-10 13:13:03

使用jquery從動態html表中刪除一行

回答

相關問題