Reputation: 1145
I have this example table
<table border="1" id="tabla">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
I try to add content dynamically with Jquery with this
$("#tabla").find('tfoot').append($('<td><b>Total</b></td><td>a</td><td>b</td>'));
But, don't works
If a use firebug to inspect table, this have a tfoot but empty. ¿How to add dynamically content to a tfoot without added content previously?
Upvotes: 5
Views: 12854
Reputation: 1291
a solution without changing your html would be to add the tfoot first:
$(function($){
var foot = $("#tabla").find('tfoot');
if (!foot.length) foot = $('<tfoot>').appendTo("#tabla");
foot.append($('<td><b>Total</b></td><td>a</td><td>b</td>'));
})
Upvotes: 9
Reputation: 68440
Try adding an explicit tfoot
tag on your HTML
<table border="1" id="tabla">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tfoot></tfoot>
</table>
Upvotes: 1