表格单元格未在其表格行中呈现

Question

JSON 结构：

{“行”：[

 {"row":[ 
      {"cells": [
     {"data": "Edit"},
     {"data": "030194"},

      ]}
 ]},
 {"row":[
      {"cells": [
     {"data": "Add"},
     {"data": "030194"},
      ]}
 ]},
 {"row":[
      {"cells": [
     {"data": "Delete"},
     {"data": "030194"},
      ]}
 ]}           

]}

JQuery 代码：

$.each(response.rows, function(index, rows){

 $.each(rows.row, function(index,row){ 
      var element=$("tbody").append("<tr id='" + index + "'>");  
      var element1=element.append("<td><input type='checkbox'></input></td>");
      $.each(this.cells, function(index){ 
           element1.append("<td>" + this.data + "</td>"); 
      });
      $("tbody").append("</tr>"); 
 });  

});

问题：

1. 生成的每一行都有一个 ID，其值为 index = 0。Row1 的 ID 应为 0，Row2 的 ID 应为 1，Row3 的 ID 应等于 2

2. td 元素被绘制为 tbody 的子元素。他们应该是 tr 的孩子

3. 关闭tr应该在每行最后一个单元格之后绘制，目前tr在绘制任何单元格之前自行关闭

Answer 1

试试这个。这让我有点难过，因为在循环遍历 DOM 元素的上下文中，我已经习惯了 .each() 的语法。因为它是 $.each()，所以第一个循环的索引是指您试图为每一行获取的数字。

我将 TR 附加移到了你所在的循环之外。

（Last-child 不是添加 TD 最快的方法，您可以使用 createElement 之类的 Endophage 发布，然后参考）

http://jsfiddle.net/EY4an/

$.each(response.rows, function(index, rows) {

    $("tbody").append('<tr id="index' + index + '"></tr>');

    $.each(this.row, function(index) {
        var element1 = $("tbody tr:last-child").append("<td><input type='checkbox'></input></td>");
        $.each(this.cells, function(index) {
            element1.append("<td>" + this.data + "</td>");
        });
    });
});

我还在表格行的 ID 属性中添加了“索引”一词，因为 ID 应该以字母开头。

Answer 2

不是 100% 确定索引问题，但在渲染方面，这里有一个细分：

var element=$("tbody").append("<tr id='" + index + "'>");

我认为这是您的错误开始的地方，在上面的行中，元素将等于 tbody，而不是 tr。

var element1=element.append("<td><input type='checkbox'></input></td>");

现在您将 td 附加到 tbody，然后 element1 也将等于 tbody。 ，因此为什么每个里面的下一个附加不能正常工作。最后，您应该只附加整个元素，因此不应期望将 <tr> 和 </tr> 作为两个单独的操作附加。

试试下面的：

var row = document.createElement('tr');
row.setAttribute('id', index);
$("tbody").append(row);  
$(row).append("<td><input type='checkbox'></input></td>");
$.each(this.cells, function(index){ 
    $(row).append("<td>" + this.data + "</td>"); 
});
$("tbody").append(row);

只是对索引问题的思考。您使用了名称index 两次。尝试为其中一个使用不同的变量名。