如何使用JQuery動態創建使用JSON數據的表格

我有我需要在表中顯示的JSON數據，然後在該表上應用數據表。表格的某些部分是靜態的，而其他部分必須動態創建。將會有動態的頭文件和offcource數據將被顯示在JSON中。我的靜態HTML代碼如下如何使用JQuery動態創建使用JSON數據的表格

<table border="1" align="center" id="info-table"> 
<thead> 
<tr> 
    <th>Roll No</th> 
    <th>Student Name</th> 
    <th>Student ID</th> 
    <th>Class</th>

現在我必須動態地添加更多標題，以便我使用$ .each。之後，我需要添加TD來顯示數據。代碼如下所示

obj = $.parseJSON(json.responseText); 
    if (obj.collection.response.error) { 
     displayError(obj.collection.response.error); 
     } else { 
      //Prepare fields for Attendance codes 
      $.each(obj.collection.response.attendanceCodes, function(key, value){ 
       $('#info-table tr').append("<th>"+value.title+"</th>"); 
      }); 
      //Add the static headers 
      $('#info-table tr').append("<th>Teacher Comment</th><th>Admin Comment</th></tr></thead><tbody>"); 
      //Prepare fields for EachStudent 
     $.each(obj.collection.response, function(i, val){ 
      if(i != 'attendanceCodes'){ 
       $('#info-table').append("<tr><td>"+val.rollNo+"</td><td>"+val.studentName+"</td><td>"+val.studentId+"</td><td>"+val.className+"</td><td align=\"center\"><div class=\"radio-green\"><input type=\"radio\" checked=\"checked\" name=\"attend-"+val.studentId+"\" /></div></td><td align=\"center\"><div class=\"radio-red\"><input type=\"radio\" name=\"attend-"+val.studentId+"\" /></div></td><td><input type=\"text\" style=\"width:200px;\" name=\"teacher-comment-"+val.studentId+"\" /></td><td>- - -</td><td></td><td></td><td></td><td></td></tr>"); 
      } 
     }); 
     //$('#info-table').dataTable(); 
     } 
    }, 
    dataType:"JSON"

但是這個代碼不工作，我收到的控制檯錯誤，說：遺漏的類型錯誤：無法讀取空

的特性「的childNodes」

來源

2014-01-10 Om Shanker

這將是，如果你更好使用任何jquery插件。像datatable或jqgrid.It將爲JSON和基於XML的數據提供良好的支持。

http://trirand.com/blog/jqgrid/jqgrid.html

來源

2014-01-10 05:15:44 Innovation

jqgrid是很多事情的完整解決方案，但是當您只需要使用json填充表時，使用像這樣的解決方案可能太重了。還有一些時候，你需要一個不同的json結構，然後預期，然後再次處理json是開銷。 –

是的，我得到了答案......

我們將不得不刪除收盤tr和THEAD和該區域將成爲新的代碼和它的工作。

//Add the static headers 
      $('#info-table tr').append("<th>Teacher Comment</th><th>Admin Comment</th>");

來源

2014-01-10 05:16:59

如何使用JQuery動態創建使用JSON數據的表格

回答

相關問題