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

代码完美无缺，表格已成功填充

但我正在寻找的是，我想在该行的结束处添加删除按钮，用户将通过该按钮删除行，以及处理click事件以执行所需操作

也很重要

我已经以另一种方式完成了这项工作，但效率并不高，我想使用上面的代码来实现这一点，因为它更有效：

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的末尾添加按钮，并删除类。

Answer 2

试试这个，我为表格中的每个按钮都包含了事件处理程序。

<强>变化：

为表格内的每个按钮添加事件监听器。
使用参数调用方法（函数）。

注意： 我正在使用fadeOut方法仅用于淡入淡出目的。所以你可以看到变化。您可以根据需要更改脚本。

解答：

var cRow = $(this).parents('tr');在此行中我们$(this)表示我们已选择您点击的按钮对象，并使用标记名称tr搜索父级。我们需要这样做，因为我们需要控制tr对象内的所有数据。

var cId = $('td:nth-child(2)', cRow).text();具有位于td对象上的平均搜索第二个cRow对象。并从选定的td。
中获取文字

JQUERY REFFERENCES：

.parents()

:nth-child()

$(this) 或 $(this)

$(document).ready(function() { var jsonData = [ {id: 'A01', name: 'Fadhly'}, {id: 'A02', name: 'Permata'}, {id: 'A03', name: 'Haura'}, {id: 'A04', name: 'Aira'} ]; $.each(jsonData, function(key, val) { var tr = '<tr>'; tr += '<td>' + (key + 1) + '</td>'; tr += '<td>' + val.id + '</td>'; tr += '<td>' + val.name + '</td>'; tr += '<td><button class="delete" data-key="'+ (key + 1) +'">Delete</button></td>'; tr += '</tr>'; $('tbody').append(tr); }); $('button.delete').on('click', function() { var cRow = $(this).parents('tr'); var cId = $('td:nth-child(2)', cRow).text(); var intKey = $(this).data('key'); cRow.fadeOut('slow', function() { doDelete(cId, intKey); }); }); function doDelete(param1, param2) { alert('Data with\n\nID: [' + param1 + ']\nKey: [' + param2 + ']\n\nRemoved.'); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" width="100%"> <thead> <tr> <th>#</th> <th>Id</th> <th>Name</th> <th>Action</th> </tr> </thead> <tbody> </tbody> </table>

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

jQuery代码：

2 个答案: