将 td 附加到带有 $.each 循环 JQuery 的行答案

【问题标题】：Appending td to rows with $.each loop JQuery将 td 附加到带有 $.each 循环 JQuery 的行
【发布时间】：2017-10-23 15:39:35
【问题描述】：

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

 $.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 任何关于为什么这不起作用的想法将不胜感激。

【问题讨论】：

标签： javascript jquery loops each

【解决方案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>');
  });
});

【讨论】：

出于某种原因，我收到“val.map 不是函数”错误。不知道为什么我使用 $.map(val, fucntion(){...}) 使用以下答案的一部分并且它有效。我感谢您，因为您的回答有助于我理解 $.each 的工作原理。谢谢！

【解决方案2】：

每个方法都只是迭代，你想归还元素，为此你使用 map 而不是 each：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：