使用 $.each 循环将 td 附加到行 JQuery

Question

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

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

循环代码未使用行填充 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 而不是 each ：

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

Answer 3

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

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

使用 $.each 循环将 td 附加到行 JQuery

Appending td to rows with $.each loop JQuery

javascript

each

jquery

loops