jquery - Jquery を使用してテーブルの tfoot にコンテンツを追加する

Question

私はこの例のテーブルを持っています

<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>

これでJqueryでコンテンツを動的に追加しようとしています

$("#tabla").find('tfoot').append($('<td><b>Total</b></td><td>a</td><td>b</td>'));

しかし、動作しません

Firebug を使用してテーブルを検査する場合、これには tfoot がありますが空です。以前にコンテンツを追加せずに tfoot に動的にコンテンツを追加する方法は?

Answer 1

HTML を変更せずに解決するには、最初に tfoot を追加します。

$(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

tfootHTML に明示的なタグを追加してみてください

<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>