I'm using jQuery to add an additional row to a table as the last row.
I have done it this way:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Are there limitations to what you can add to a table like this (such as inputs, selects, number of rows)? Is there a different way to do it?
So things have changed ever since @Luke Bennett answered this question. Here is an update.
jQuery since version 1.4(?) automatically detects if the element you are trying to insert (using any of the append(), prepend(), before(), or after() methods) is a <tr> and inserts it into the first <tbody> in your table or wraps it into a new <tbody> if one doesn't exist.
So yes your example code is acceptable and will work fine with jQuery 1.4+. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
What if you had a <tbody> and a <tfoot>?
Such as:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Then it would insert your new row in the footer - not to the body.
Hence the best solution is to include a <tbody> tag and use .append, rather than .after.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
I'm using this way when there is not any row in the table, as well as, each row is quite complicated.
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...