Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

share|improve this question
add comment

2 Answers 2

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

share|improve this answer
    
jqgrid is complete solution for lot of things, But when you need to just populate a table with json, It may be too heavy to use a solution like this. Also Some times you need a different json structure then expected, Then again processing of json is overhead. –  kuldeep.kamboj Jan 10 at 6:12
add comment

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>");
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.