html中tfoot的实例

HTML `<tfoot>` 元素用于在表格（`<table>`）的底部添加一行或多行脚注或者总计。它通常包含表的总结信息，如总金额、计数等，但不是表格数据的一部分。下面是一个简单的 `tfoot` 实例：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>上海</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
  <tfoot>
    <tr>
      <td>总计：</td>
      <td><span id="totalAge">65</span></td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

<script>
  // JavaScript计算并更新总年龄
  let total = document.querySelectorAll('tbody tr td:nth-child(2)').reduce((a, b) => parseInt(a) + parseInt(b.textContent), 0);
  document.getElementById("totalAge").textContent = total;
</script>

在这个例子中，`<tfoot>` 中的内容只有在JavaScript动态计算了总年龄并显示在 `<span>` 中时才具有实际意义。