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

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在内部循环中将元素添加到元素中。

另外，您可以在单个字符串中构建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>');
  });
});