Question

我有以下JSON结构：

{"rows": [

      {"row":[  
             {"cells": [
                   {"data": "Edit"},
                   {"data": "Add"}
             ]}
      ]},
      {"row":[
             {"cells": [
                   {"data": 1},
                   {"data": 2}
             ]}
      ]}
]}

对于JSON文件中的每个“行”，将有一个表行，每个“数据”都有一个行列。

我的代码如下所示：

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

     $.each(rows.row, function(index, row){
          $("tbody").append("<tr>"); 
          $.each(this.cells, function(){ 
               $("tr").append("<td>" + this.data + "</td>");
          });
          $("tbody").append("</tr>");
     });
});

我的代码生成表行/列，如下所示：

Row 1 -- I get 4 columns with values "Edit"/"Add"/1/2 
Row 2 -- I get 2 columns with values 1/2.

如果我在JSON文件中添加另一个“行”，那么第1行＆amp; 2被错误地渲染。

第1行应该只有2列，其值为“编辑”/“添加”。 JSON结构似乎是正确的。

有人可以告诉我我做错了什么吗？谢谢。

Answer 1

这是你的语法：http://jsfiddle.net/SXzny/修复了它，因为它不引用所有标记，而是引用你创建的标记。

例如，替换：

$.each(rows.row, function(index, row){
  $("tbody").append("<tr>"); 
  $.each(this.cells, function(){ 
       $("tr").append("<td>" + this.data + "</td>");
  });
  $("tbody").append("</tr>");
});

使用：

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

JSON数据中表列的不正确呈现

1 个答案: