Append in a table with jQuery

Question

This is my code to add rows to a table

for(var i=0;i<subjects.length;i++){
    $('#table-wrapper table').append("<tr><td data-subjectid="+i+">"+subjects[i].name+"</td>");
    for(var j=0;j<no_of_batches;j++){
            $('#table-wrapper table').append("<td data-batchid="+j+"></td>");
    }
    $('#table-wrapper table').append("</tr>");
} 

The output this produces is

<table> 
    <tbody>
       <tr>
         <tr>
           <td data-subjectid="2">DBMS</td>
         </tr>
     </tbody>
        <td data-batchid="0"></td>
        <td data-batchid="1"></td>
        <td data-batchid="2"></td>
        <td data-batchid="3"></td>
 </table>

Why aren't the inner <td>'s getting appended to the <tr> tag at the end of the table but instead out of the <tbody>

Answer 1

You need to do this -

for(var i=0;i<subjects.length;i++){
    var $tr = $('<tr></tr>');
    $tr.append("<td data-subjectid="+i+">"+subjects[i].name+"</td>");
    for(var j=0;j<no_of_batches;j++){
            $tr.append("<td data-batchid="+j+"></td>");
    }
    $('#table-wrapper table').append($tr);
} 

Answer 2

You are appending to the table by

$('#table-wrapper table').append("<td data-batchid="+j+"></td>");

need to append to the last tr

$('#table-wrapper table tr:last-child').append("<td data-batchid="+j+"></td>");

have not tested but it should work

The better way is to add the contents to a string then append once

var temp;
for(var i=0;i<subjects.length;i++){
    temp = "<tr><td data-subjectid="+i+">"+subjects[i].name+"</td>";
    for(var j=0;j<no_of_batches;j++){
            temp = temp + "<td data-batchid="+j+"></td>";
    }
    temp = temp + "</tr>"
}
$('#table-wrapper table tbody').append(temp); 

Answer 3

If I understand your code right, you might try this way:

var table = $('#table-wrapper table');
for(var i = 0; i < subjects.length; i++) {
    var row = $('<tr />');
    row.append("<td data-subjectid=" + i + ">" + subjects[i].name + "</td>");
    for(var j = 0; j < no_of_batches; j++) {
        row.append("<td data-batchid=" + j + "></td>");
    }
    table.append(row);
} 

There you create a row, append cells to it and after it append new row to the table. You might want cache the reference to your table as well.

Answer 4

The append method is not a writeln equivalent. It actually tries to parce the text and produce final complete tags.

Use a temporary string variable to accumulate all the stuff you want to append, and call append only once at the end.

var s;
for(var i=0;i<subjects.length;i++){
  s = "<tr><td data-subjectid="+i+">"+subjects[i].name+"</td>";
  for(var j=0;j<no_of_batches;j++){
    s += "<td data-batchid="+j+"></td>";
  }
  s += "</tr>";
  $('#table-wrapper table').append(s);
}