CODEWITHSUNDEEP
javascriptjquery
Nivin Rai
Nivin Rai

Reputation: 258

how can we set table footer values dynamically using jQuery

I need to dynamically populate a table footer from a JSON data source. Here is the struture of the table

<table  id="example_table">
<tfoot id="example_footer">
<tr id="example-footer" style="font-weight:bold">
<th></th>
<th></th>
<th></th>
<th></th>                                           
<th></th>
</tr>
</tfoot>  
</table>

I m planning to use the append() in jQuery as in the below fashion 

$('#example_footer').append( '<tr>...</tr>' );

can anyone tell me how to access the tfooter and assign value form a js variable as it's content

Upvotes: 1

Views: 2383

Answers (1)

Pulkit Mittal
Pulkit Mittal

Reputation: 6086

It actually depends upon how your JSON is structured. Assuming that it is received in the variable 'data' and it has say 5 elements, the javascript would be somewhat like:

var tr = '<tr>';
tr+= '<th>'+data.element1+'</th>';
tr+= '<th>'+data.element2+'</th>';
tr+= '<th>'+data.element3+'</th>';
tr+= '<th>'+data.element4+'</th>';
tr+= '<th>'+data.element5+'</th>';
tr+= '</tr>';
$('#example_footer').append(tr);

Upvotes: 2

Related Questions