javascript - 使用 jquery 将按钮动态附加到表行

Question

我有一个 JavaScript JSON 对象数组，它是从 JSON 格式的字符串中解析出来的。现在我正在做的是遍历数组并将数据附加到页面内的表格。

jQuery 代码:

$.each(objArr, function(key, value) {
  var tr = $("<tr />");
  $.each(value, function(k, v) {
    tr.append($("<td />", {
      html: v
    }));
    $("#dataTable").append(tr);
  })
})

代码完美运行，表格已成功填充

但我正在寻找的是，我想在行的末尾添加一个删除按钮，用户将通过该按钮删除该行，处理点击事件以执行所需的操作也很重要

我已经用另一种方式做到了，但效率不高，我想使用上面的代码来完成它，因为它更有效:

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

尝试这样的事情:

$.each(objArr, function (key, value) {
                var tr = $("<tr />");
                $.each(value, function (k, v) {
                    tr.append($("<td />", { html: v }));
                    tr.append("<button class='remove' />");
                    $("#dataTable").append(tr);
                })
            })

这将在 tr 的末尾附加带有删除类的按钮。