使用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中添加内容而无需先添加内容呢？

- user1783933

---

你得到了两个可行的答案，你可能想选择其中一个？ :) - Rene Koch

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

- Rene Koch

Answer 2

尝试在你的HTML中添加明确的tfoot标签。

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

- Claudio Redi