如何通过jQuery使用JSON数据动态创建表

Question

I have JSON data which i need to displayed in a table and then apply datatable on that table. Some part of the table is static while others must be created dynamically. There will be dynamic headers and offcource the data data to be shown will be taken from JSON. My Static HTML Code is as follows

<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>

Now i have to dynamically add more headers so for that i am using $.each. After that i need to add The TD's to show the data. The code is as follows

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"

But this code is not working and i am getting error in console that says: Uncaught TypeError: Cannot read property 'childNodes' of null

Answer 1

It will be better if you use any jquery plugin for that.Like datatable or jqgrid.It will give good support to JSON and XML based data.

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

Answer 2

Yes i got the answer...

We will have to remove the closing tr and thead and the new code for that area will be and it worked.

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