表格單元的表格行

Question

JSON結構：

{ 「行」：[

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

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

]}

JQuery的代碼：

$。每個（response.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 = 0。ROW1的ID應該是0，用於行2應該是1和用於ROW3 ID應等於2

2. td元素被抽出爲tbody的子元素。他們應該是TR

3. 關閉TR的孩子每行的最後一個單元格，目前TR會自行關閉後，應得出的任何單元格繪製

Answer 1

試試這個。這讓我苦惱了一會兒，因爲我習慣了在通過DOM元素循環的上下文中.each（）的語法。由於它是$ .each（），所以第一個循環的索引指向你想要爲每一行獲取的數字。

我把TR追加移到了你所在的循環之外。

（最後，孩子是不是加入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>"); 
     }); 
    }); 
}); 

我還添加了字'index'指向錶行的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然後部件1也將等於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兩次。嘗試爲其中一個使用不同的變量名稱。