Add content to a tfoot in a table with Jquery

Question

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?

Answer 1

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>'));
})

Answer 2

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>