Question

我试图通过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 任何有关为什么不起作用的想法将不胜感激。

Answer 1

问题是因为您无法在$.each()方法中拨打append() - 至少不是按照您尝试的方式。您需要先附加tr元素，然后将td添加到内循环中。{/ p>

或者，您可以在单个字符串中构建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可以接受一个函数并使用它的返回值。您需要在map中append结果并返回结果。

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

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

3 个答案: