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

📌 相关文章

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

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

HTML | DOM 表 insertRow() 方法

简介

HTML | DOM 表 insertRow() 方法用于在 HTML 表格中添加新行，有两种形式：

insertRow()：在表格的末尾添加新的一行，且不需要参数。
insertRow(index)：在表格的指定位置添加新的一行，需要一个数字参数，表示在表格中的位置。

语法

// 在表格末尾添加一行
tableObject.insertRow();

// 在表格指定位置添加一行
tableObject.insertRow(index);

参数

index：数字类型，表格中行的索引位置，从 0 开始。

返回值

若成功添加了一行，则返回对新添加的一行的引用 (HTMLTableRowElement)。

示例

<!DOCTYPE html>
<html>
<head>
	<title>insertRow() 方法示例</title>
</head>
<body>
	<table id="myTable">
		<thead>
			<tr>
				<th>Name</th>
				<th>Age</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John</td>
				<td>25</td>
			</tr>
			<tr>
				<td>Jane</td>
				<td>30</td>
			</tr>
		</tbody>
	</table>

	<button onclick="addRow()">添加一行</button>
	<button onclick="addRow(0)">在表头添加一行</button>

	<script>
		var table = document.getElementById("myTable");

		function addRow(index) {
			var newRow = table.insertRow(index);
			var nameCell = newRow.insertCell(0);
			var ageCell = newRow.insertCell(1);

			nameCell.innerHTML = "Tom";
			ageCell.innerHTML = "28";
		}
	</script>
</body>
</html>

上述示例中，我们创建了一个包含两个表头和两行数据的表格。同时，我们在页面中添加了两个按钮，分别用于在表格尾部和表格头部添加新行。实现的方式是通过 JavaScript 的 insertRow() 方法实现的。

在 addRow() 函数中，我们首先获取了表格的 DOM 元素，并创建了一个新的行（newRow），并向其中添加了两个单元格（nameCell 和 ageCell），分别用于显示姓名和年龄。最后，在单元格中填充了文本值，即我们添加的新行数据。