JS内のテーブルビルドから行を削除する方法

Question

JSONオブジェクトからテーブルを作成し、それを取得してそのコンテンツからテーブルを自動的に構築しました。次に、各行を個別に削除するボタン（jsを使用）を含む新しい列を追加しました。どのように私は各行のIDに応じて特定の行を削除することができますか？

table.js

$(document).ready(function(){ 
var json = [ 
    { 
    "id": "0", 
    "firstName":"Ahmed", 
    "lastName":"Mahmoud", 
    "Email": "ahmed.m92@gmail.com", 
    "Phone": "0599547632", 
    "Type": "Male"}, 
    { 
    "id": "1", 
    "firstName":"Mahmoud", 
    "lastName":"Qasem", 
    "Email": "m.Qasem80@gmail.com", 
    "Phone": "0599547632", 
    "Type" : "Male"}, 

    { 
    "id": "2", 
    "firstName":"Lena", 
    "lastName":"Asaed", 
    "Email": "lena_ahmed@hotmail.com", 
    "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 これは私がそれをテストdidntのテーブル

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 + "'>"; 

アップデート： "onclickの" なしでjQueryの道：ご返信用

$(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