如何从表格中删除行构建JS

Question

我从JSON对象构建了一个表格，然后从其内容中自动检索并建立表格。然后我添加了一个包含按钮的新列（使用js）分别删除每一行。我如何删除某些行取决于每个行ID？

table.js

$(document).ready(function(){ 
var json = [ 
    { 
    "id": "0", 
    "firstName":"Ahmed", 
    "lastName":"Mahmoud", 
    "Email": "[email protected]", 
    "Phone": "0599547632", 
    "Type": "Male"}, 
    { 
    "id": "1", 
    "firstName":"Mahmoud", 
    "lastName":"Qasem", 
    "Email": "[email protected]", 
    "Phone": "0599547632", 
    "Type" : "Male"}, 

    { 
    "id": "2", 
    "firstName":"Lena", 
    "lastName":"Asaed", 
    "Email": "[email protected]", 
    "Phone": "0599547632", 
    "Type": "Female"} 
]; 
     var tr; 
     var buttonnode= document.createElement('input'); 
     for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 

      tr.append("<td>" + json[i].id +"</td>"); 
      tr.append("<td >" + json[i].id +"</td>"); 
      tr.append("<td >" + json[i].firstName +"</td>"); 
      tr.append("<td >" + json[i].lastName + "</td>"); 
      tr.append("<td >" + json[i].Email + "</td>"); 
      tr.append("<td >" + json[i].Phone + "</td>"); 
      tr.append("<td >" + json[i].Type + "</td>"); 
      tr.append("<td >"+'<button id="delete" >Delete</button>'+"</td>"); 
      $('table').append(tr); 
     } 
    }); 

enter image description here 这是表

Answer 1

我没有测试它的快照，但你可以做这样的：

var table = $("table"); 

for (var i = 0; i < json.length; i++) { 
    var row = "<tr id='row-" + i + "'>"; 
    row += "<td>" + json[i].id +"</td>"; 
    row += "<td>" + json[i].firstName +"</td>"; 
    row += "<td>" + json[i].lastName + "</td>"; 
    row += "<td>" + json[i].Email + "</td>"; 
    row += "<td>" + json[i].Phone + "</td>"; 
    row += "<td>" + json[i].Type + "</td>"; 
    row += "<td><button onClick='deleteRow(" + i +")'>Delete</button></td>"; 
    row += "</tr>"; 
    table.append(row); 
} 

function deleteRow(rowId){ 
    table.find("td#row-" + rowId).remove(); 
} 

对于较大的表我强烈建议使用像AngularJS这样的框架，这样可以很容易地保持标记的简单性并实现修改表格的功能。

// edit: if you want to use the original ID of your JSON you can just replace the counter with the JSON objects ID 
var row = "<tr id='row-" + json[i].id + "'>"; 

更新：jQuery的方式，而不 “onclick” 事件：

$(document).ready(function(){ 
    var table = $("table"); 

    for (var i = 0; i < json.length; i++) { 
     var row = "<tr id='row-" + i + "'>"; 
     row += "<td>" + json[i].id +"</td>"; 
     row += "<td>" + json[i].firstName +"</td>"; 
     row += "<td>" + json[i].lastName + "</td>"; 
     row += "<td>" + json[i].Email + "</td>"; 
     row += "<td>" + json[i].Phone + "</td>"; 
     row += "<td>" + json[i].Type + "</td>"; 
     row += "<td><button class='remove-button' data-id='" + i + "'>Delete</button></td>"; 
     row += "</tr>"; 
     table.append(row); 
    }; 

    $(".remove-button").click(function(){ 
    var rowId = $(this).data("id"); 
    $("#row-" + rowId).remove(); 
    }); 
}); 

JSFiddle