javascript 动态添加表格行

最新推荐文章于 2026-06-24 03:59:28 发布

最新推荐文章于 2026-06-24 03:59:28 发布 · 195 阅读

收录于

Javascript

当前文章被收录于：

Javascript

19 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何使用JavaScript中的insertRow()和insertCell()函数来动态地在HTML表格中添加新的行和单元格。通过示例代码展示了如何获取用户输入的内容并将其添加到指定位置。

inserRow() 和 insertCell() 函数

insertRow() 函数可以带参数，形式如下：

insertRow(index)

这个函数将新行添加到 index 的那一行前，比如 insertRow(0), 是将新行添加到第一行之前。默认的 insertRow() 函数相当于 insertRow(-1), 将新行添加到表的最后。

insertCell() 和 insertRow 的用法相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>..</title>
</head>
<body>

<table id="test0">
<table>

<table id="test1">
	<tr>
		<td>内容：<input id="content" name="content" type="text"></td>
		<td>时间：<input id="time" name="time" type="text"></td>
		<td><input id="add" type="button" value="添加"></td>
	</tr>
</table>

<script type="text/javascript">
document.getElementById("add").onclick = addC;
	function addC(){
		
		var table1 = document.getElementById("test0");
		var content = document.getElementById("content").value;
		var time = document.getElementById("time").value;

		//添加一行
		var newTr = table1.insertRow(0);
		//添加两列
		var newTd0 = newTr.insertCell(0);
		newTd0.innerHTML = "内容："+ content  ;

		var newTd1 = newTr.insertCell(1);
		newTd1.innerHTML= "时间 ："+ time  ;
	}
</script>

</body>
</html>

标签

#JavaScript #XHTML #HTML #ViewUI