添加＆＃34;删除＆＃34;使用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所以我做到了。

＆＃13;

＆＃13;

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();
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外，让我建议您为所有代码提供更好的方法（我认为）。

＆＃13;

＆＃13;

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();
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

以下解决方案使用DocumentFragment创建您的DOM（jQuery没有必要）。

使用Template literals（ES 6）创建模板。

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

1. 在您的HTML上添加类型=＆＃39; text / template＆＃39;的脚本标记。和id（#row）像这样：

   xyzViewha0

2.然后在javascript：

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

这比使用字符串更好。

Answer 4

您可能也喜欢my solution。我使用的是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