HTML | DOM 表 createTFoot() 方法(1)

📌 相关文章

📜 HTML | DOM 表 createTFoot() 方法(1)

📅 最后修改于: 2023-12-03 15:01:13.165000 🧑 作者: Mango

HTML | DOM 表 createTFoot() 方法

简介

HTML DOM 表（<table> 元素）的 createTFoot() 方法用于在表格中创建一个新的表尾(<tfoot>)元素，并将其添加到表格对象中。

语法

tableObj.createTFoot();

其中，tableObj 是指 table 元素的 JavaScript 对象。

返回值

该方法没有返回值。

示例

以下示例演示如何使用 createTFoot() 方法创建一个新的表尾并添加行和单元格：

<!DOCTYPE html>
<html>
<head>
	<title>createTFoot() 示例</title>
	<meta charset="utf-8">
</head>
<body>
	<table id="myTable">
		<thead>
			<tr>
				<th>Name</th>
				<th>Age</th>
				<th>City</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Jack</td>
				<td>26</td>
				<td>Beijing</td>
			</tr>
			<tr>
				<td>Mary</td>
				<td>32</td>
				<td>Shanghai</td>
			</tr>
		</tbody>
	</table>
	<script>
		// 获取表格对象
		var tableObj = document.getElementById("myTable");

		// 创建新的表尾
		var tfootObj = tableObj.createTFoot();

		// 添加一行
		var rowObj = tfootObj.insertRow();

		// 添加两个单元格
		var cell1 = rowObj.insertCell();
		var cell2 = rowObj.insertCell();

		// 设置单元格内容
		cell1.innerHTML = "Total:";
		cell2.innerHTML = "2 persons";
	</script>
</body>
</html>

运行这段代码，会在表格的底部添加一个新的表尾，并在其中添加一行和两个单元格，用于显示表格的总行数。

总结

HTML DOM 表的 createTFoot() 方法用于在表格中创建一个新的表尾，并将其添加到表格对象中。该方法没有返回值，但可以用返回的新的表尾对象添加行和单元格，从而对表格进行操作。