HTML | DOM 表 tHead 属性(1)

📌 相关文章

📜 HTML | DOM 表 tHead 属性(1)

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

HTML | DOM 表 tHead 属性

tHead 属性代表 HTML 表格的表头部分。通常，表头部分包含一行或多行表头单元格。在 HTML DOM 中，我们可以通过 tHead 属性来访问和操作表格的表头部分。

语法

以下是 tHead 属性的语法：

tableObject.tHead

其中 tableObject 表示要访问的表格对象，可以是通过 document.getElementById() 或者 DOM 中的其它方法获取的元素节点对象。

使用 tHead 属性

我们可以使用 tHead 属性来获取指定表格的表头部分对象，并对其进行操作。以下是一些常见的使用场景。

获取表头单元格

我们可以通过 tHead.rows 属性获取表头部分的行集合，通过 rows[0] 或者 rows.item(0) 等方法获取表头部分的第一个行对象，再通过 cells 属性获取单元格集合，从而获取表头部分的每个单元格对象。

例如，以下代码可以获取 ID 为 "myTable" 的表格的第一个表头单元格对象：

var table = document.getElementById("myTable");
var headerCell = table.tHead.rows[0].cells[0];

修改表头单元格样式

我们可以通过表格对象的 style 属性，对表头单元格进行样式的修改。

例如以下代码可以将 ID 为 "myTable" 的表格的第一个单元格的文本颜色修改为红色：

var table = document.getElementById("myTable");
var headerCell = table.tHead.rows[0].cells[0];
headerCell.style.color = "red";

示例代码

<!DOCTYPE html>
<html>
<head>
	<title>表头部分操作示例</title>
	<style type="text/css">
		table, td {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<table id="myTable">
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>张三</td>
				<td>25</td>
			</tr>
			<tr>
				<td>002</td>
				<td>李四</td>
				<td>30</td>
			</tr>
			<tr>
				<td>003</td>
				<td>王五</td>
				<td>35</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		var table = document.getElementById("myTable");
		var headerCell = table.tHead.rows[0].cells[0];
		headerCell.style.color = "red";
	</script>
</body>
</html>

以上代码展示了如何使用 tHead 属性获取指定表格的表头对象，并对表头单元格进行样式修改的操作。最终的页面效果如下图所示：

表头部分操作示例页面效果