使用jQuery动态添加“删除”按钮到HTML表

Question

就这么简单，我的问题的想法是我有一个JSON对象数组，我想动态地将这些对象附加到HTML表，并在最后一个td我想添加一个删除按钮，所以我可以删除行。

实际上我花了几天时间寻找有效的解决方案，但遗憾的是没有找到任何东西。

我试图用自己的方式做到这一点，这就是我想出来的：

for (var i = 0; i < objArr.length; i++) {
  var tr = "<tr>";
  var td1 = "<td>" + objArr[i]["empID"] + "</td>";
  var td2 = "<td>" + objArr[i]["fname"] + "</td>";
  var td3 = "<td>" + objArr[i]["lname"] + "</td>";
  var td4 = "<td>" + objArr[i]["phone"] + "</td>";
  var td5 = "<td>" + objArr[i]["address"] + "</td>";
  var td6 = "<td>" + objArr[i]["deptID"] + "</td>";
  var td7 = "<td>" + objArr[i]["email"] + "</td>";
  var td8 = "<td>" + '<button id="' + objArr[i]["empID"] + '" value="' + objArr[i]["empID"] + '" onclick="onClickDelete(' + objArr[i]["empID"] + ')">Delete</button>' + "</td></tr>";

  $("#dataTable").append(tr + td1 + td2 + td3 + td4 + td5 + td6 + td7 + td8);

}

但正如您可能注意到的那样，这不是实现这一目标的有效方式。 我很确定肯定有更好的解决方案。

所以任何人都可以提供任何建议

Answer 1

您只需要将event传递给函数onClickDelete这样您就可以获得带有event.target的按钮。 然后，您可以使用parents('tr')获取父级tr 。 最后，使用remove()函数删除它。

我不知道你的objArr所以我做到了。

 var objArr = [ { empID:'empID1', fname: 'fname1', lname: 'lname1', phone: 'phone1', address: 'address1', deptID: 'deptID1', email: 'email1' }, { empID:'empID2', fname: 'fname2', lname: 'lname2', phone: 'phone2', address: 'address2', deptID: 'deptID2', email: 'email2' } ]; for (var i = 0; i < objArr.length; i++) { var tr = "<tr>"; var td1 = "<td>" + objArr[i]["empID"] + "</td>"; var td2 = "<td>" + objArr[i]["fname"] + "</td>"; var td3 = "<td>" + objArr[i]["lname"] + "</td>"; var td4 = "<td>" + objArr[i]["phone"] + "</td>"; var td5 = "<td>" + objArr[i]["address"] + "</td>"; var td6 = "<td>" + objArr[i]["deptID"] + "</td>"; var td7 = "<td>" + objArr[i]["email"] + "</td>"; var td8 = "<td>" + '<button id="' + objArr[i]["empID"] + '" value="' + objArr[i]["empID"] + '" onclick="onClickDelete(event, ' + objArr[i]["empID"] + ')">Delete</button>' + "</td></tr>"; $("#dataTable").append(tr + td1 + td2 + td3 + td4 + td5 + td6 + td7 + td8); } function onClickDelete(event) { $(event.target).parents('tr').remove(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="dataTable"></table> 

另外，让我建议你对所有代码采用更好的方法（在我看来）。

 var objArr = [ { empID:'empID1', fname: 'fname1', lname: 'lname1', phone: 'phone1', address: 'address1', deptID: 'deptID1', email: 'email1' }, { empID:'empID2', fname: 'fname2', lname: 'lname2', phone: 'phone2', address: 'address2', deptID: 'deptID2', email: 'email2' } ]; var html = ''; for (var i = 0; i < objArr.length; i++) { html = "<tr>"; html += "<td>" + objArr[i]["empID"] + "</td>"; html += "<td>" + objArr[i]["fname"] + "</td>"; html += "<td>" + objArr[i]["lname"] + "</td>"; html += "<td>" + objArr[i]["phone"] + "</td>"; html += "<td>" + objArr[i]["address"] + "</td>"; html += "<td>" + objArr[i]["deptID"] + "</td>"; html += "<td>" + objArr[i]["email"] + "</td>"; html += "<td>" + '<button>Delete</button>' + "</td></tr>"; $("#dataTable").append(html); } $('#dataTable').on('click', 'button', onClickDelete); function onClickDelete() { $(this).parents('tr').remove(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="dataTable"></table> 

这样，您的代码将更清晰，易于阅读。

Answer 2

以下解决方案使用DocumentFragment创建您的DOM（不需要jQuery）。

使用模板文字 （ES 6）创建模板 。

DocumentFragments比重复单个DOM节点注入更快，并允许在新元素上执行DOM节点操作（如添加事件），而不是通过innerHTML进行大量注入。 DocumentFragment在执行大量DOM操作时是一个很好的解决方案，如果你的表很大，它可以加快时间。

 var data = [{ empID: 'empID1', fname: 'fname1', lname: 'lname1', phone: 'phone1', address: 'address1', deptID: 'deptID1', email: 'email1' }, { empID: 'empID2', fname: 'fname2', lname: 'lname2', phone: 'phone2', address: 'address2', deptID: 'deptID2', email: 'email2' }]; var temp = document.createElement('table'); var html = ''; html += '<table style="width:100%">'; data.forEach(function(item) { console.log(item); html += `<tr>`; html += `<th>${item.empID}</th>`; html += `<th>${item.fname}</th>`; html += `<th>${item.lname}</th>`; html += `<th>${item.phone}</th>`; html += `<th>${item.address}</th>`; html += `<th>${item.deptID}</th>`; html += `<th>${item.email}</th>`; html += `<th><button type="button">Remove</button></th>`; html += `</tr>`; }); html += `</tr>`; html += '</table>'; temp.innerHTML = html; document.getElementById('output').appendChild(temp); 

 <div id="output"> </div> 

以下脚本改为使用字符串连接。

两种解决方案都将JavaScript对象中的数据附加到HTML表，并根据您的要求在每行的末尾添加一个按钮。

 var data = [{ empID: 'empID1', fname: 'fname1', lname: 'lname1', phone: 'phone1', address: 'address1', deptID: 'deptID1', email: 'email1' }, { empID: 'empID2', fname: 'fname2', lname: 'lname2', phone: 'phone2', address: 'address2', deptID: 'deptID2', email: 'email2' }]; var html = ''; html += '<table style="width:100%">'; data.forEach(function(item) { console.log(item); html += `<tr>`; html += `<th>${item.empID}</th>`; html += `<th>${item.fname}</th>`; html += `<th>${item.lname}</th>`; html += `<th>${item.phone}</th>`; html += `<th>${item.address}</th>`; html += `<th>${item.deptID}</th>`; html += `<th>${item.email}</th>`; html += `<th><button type="button">Remove</button></th>`; html += `</tr>`; }); html += `</tr>`; html += '</table>'; document.getElementById('output').innerHTML = html; 

 <div id="output"> </div> 

Answer 3

您可以使用模板，例如underscore.js，胡子或把手。 这是一个带下划线的示例。

1. 在你的HTML上添加一个类型为''text / template'的脚本标签，并带有一个id（#row），如下所示：

    <tr> <td><%= name %></td> <td><%= lastName %></td> </tr> 

2.然后在javascript上：

var obj = [{name:"Diego",lastName:"Gallegos"}, {name:"Juan",lastName:"Perez"}];

for(var i = 0; i < obj.length; i++){
     /* Pass the html of the template on step 1 to the _.template function 
        from underscore (_). Import it from its cdn */
     var row = _.template( $('#row').html() ); 

     /*  Then to the tbody of the of your table then only append each row    
         passing the object from the array. row is now a function that          
         receives an object and compiles the template to html */
     $('tbody').append(row(obj[i])); 
}

这比使用字符串更好。

Answer 4

您可能也喜欢我的解决方案 。 我使用的是ES6模板字符串，因此代码更具可读性和简洁性。

var rowsHtml = data.map(function(row) {
  var cellsHtml, row, removeButton = $('<button>', {
    text: 'Remove'
  });

  for (var i in row) if (row.hasOwnProperty(i)) {
      cellsHtml += `<td>${row[i]}</td>`;
  }

  row = $(`<tr>${cellsHtml}</tr>`);
  removeButton.click(function() {
    row.remove();
  });

  return row.append(removeButton);
});

$table.append(rowsHtml);

说明

基本上我正在对你的数据执行for循环，但我使用map函数，因为它会立即返回新数组。

var numbers = [1, 2, 3];
var newNumbers = [];
for(var i = 0; i < numbers.length; i++) {
    newNumbers.push(numbers[i] + 1);
}

// newNumbers = [2, 3 ,4]

var numbers = [1, 2, 3];
var newNumbers = numbers.map(function(number) {
    return number + 1;
});

// same result, but seems better for my eyes lol - newNumbers = [2, 3 ,4]

然后在第一行中，我使用非常简单的语法创建一个jQuery对象的按钮：

$(htmlElement, objectOfProperties);
$('<div>', {
    text: 'SomeDiv',
    "class": 'foobar' // I wrap class in quotes cause it is a reserved keyword
});
// would create <div class="foobar">SomeDiv</div>, but I can call a jQuery methods on it

现在， 在单行的for-in 循环中，我创建了表格单元格。 这就是你这样做的：

var td1 = "<td>" + objArr[i]["empID"] + "</td>";

此时， cellsHtml只是一个简单的字符串。 因为我想调用jQuery方法append它，我使用相同的方法，就像我创建一个removeButton，使平面HTML成为一个jQuery对象。

现在我使用jQuery click方法传递一个处理程序，点击它将删除我们当前正在处理的行。

最后我添加了我们的按钮（因为我还没有完成它，我们的行只包含带有数据的表格单元格）并返回行，它被添加到我们的结果数组中（通过map函数在幕后）。

Answer 5

首先，如果你使用的是JQuery，最好不要使用onclick方法，因为我们在JQuery中有this选择器，你可以将你的代码减少到以下

for (var i = 0; i < objArr.length; i++) {
  var data = "<tr>";
  data+= "<tr><td>" + objArr[i].empID + "</td><td>" + objArr[i].fname + "</td><td>" + objArr[i].lname + "</td><td>" + objArr[i].phone + "</td>     <td>" + objArr[i].address + "</td><td>" + objArr[i].deptID + "</td><td>" + objArr[i].email + "</td><td><button class='deleteRow' id=" +  objArr[i].empID +">Delete</button> </td></tr>";
  $("#dataTable").append(data);
}

然后

$(document).delegate(".deleteRow", "click", function(){
        $(this).closest("tr").remove();
});

而且我认为这对你需要的东西来说已经足够了。

Answer 6

请使用以下代码。

HTML

<table id="dataTable">
  <thead>
    <tr>
      <th>EmpId</th>
      <th>fname</th>
      <th>lname</th>
      <th>phone</th>
      <th>address</th>
      <th>deptID</th>
      <th>email</th>
      <th></th>
    </tr>
  </thead>
</table>

JS

$(document).ready(function() {
  objArr = [
  { empID : 1, fname: 'Employee1', lname: 'Last name1', phone : '234242344', address: 'address1', deptID : '1', email : 'abc@abc.com'},
  { empID : 2, fname: 'Employee2', lname: 'Last name2', phone : '234244243', address: 'address2', deptID : '1', email : 'cde@cde.com'}
  ];

  for (var i = 0; i < objArr.length; i++) {
    var emp = objArr[i];
    $("#dataTable").append("<tr><td>" + emp.empID + "</td><td>" + emp.fname + "</td><td>" + emp.lname + "</td><td>" + emp.phone + "</td>     <td>" + emp.address + "</td><td>" + emp.deptID + "</td><td>" + emp.email + "</td><td><button class='delete' id=" +  emp.empID +" name=" + emp.fname + ">Delete</button> </td></tr>");
   }

   $(".delete").click(function(){
      if (confirm('Are you sure you want to delete ' + emp.fname + ' ?')) {
         var empId = this.id; //for deletion from server
         $(this).parent().parent().remove();
      }       
   });

});

CSS

#dataTable td {
  padding : 10px;
}

#dataTable th {
  padding : 10px;
}

请参阅此Fiddle