user1783933
user1783933

Reputation: 1145

Add content to a tfoot in a table with Jquery

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

Answers (2)

Rene Koch
Rene Koch

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

Claudio Redi
Claudio Redi

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

Related Questions