将 td 附加到具有 $.each 循环 JQuery 的行

Question

我正在尝试通过 JQuery 中的 each 循环将数据添加到表格单元格中。我的循环代码如下。

 $.getJSON(filter, function (data) {
        $.each(data, function (key, val) {
           var entry = $('<tr>').append(
            $.each(val, function (key, val) {      
                $('<td contenteditable="true">').text(val);
            }));
            // var entry = $('<tr>').append(
            //     $('<td contenteditable="true">').text(val.firstName),
            //     $('<td contenteditable="true">').text(val.lastName),
            //     $('<td contenteditable="true">').text(val.address),
            //     $('<td contenteditable="true">').text(val.city),
            //     $('<td contenteditable="true">').text(val.state),
            //     $('<td contenteditable="true">').text(val.zipcode)
            // );
            entry.appendTo(table);

循环代码没有用行填充表。如果我运行 $.each 循环下方的注释部分，它会很好地填充。我可以在循环中记录 val 的值，并且数据很好。我什至可以登录 td任何关于为什么这不起作用的想法将不胜感激。

Answer 1

问题是因为您无法从 append() 方法中调用$.each() - 至少不能以您尝试的方式调用。您需要首先附加tr元素，然后将td添加到内部循环中。

或者，您可以在单个字符串中构建 HTML 并调用append()一次，如下所示：

$.getJSON(filter, function(data) {
  $.each(data, function(key, val) {
    var tds = val.map(function(value) {
      return ' <td contenteditable="true">' + value + '</td>';
    });
    table.append('<tr>' + tds.join('') + '</tr>');
  });
});

Answer 2

每个方法只是迭代，你想回馈元素，为此你使用 map 而不是每个：

$.map(val, function (key, val) {      
    return $('<td contenteditable="true">').text(val);
})

Answer 3

append可以接受一个函数，并将使用它的返回值。您需要在append中map结果并返回该结果。

$.each(data, function (key, val) {
    var entry = $('<tr>').append(
        return $.map(val, function (key, val) {      
            return $('<td contenteditable="true">').text(val);
        }));
});