javascript 动态添加表格行

最新推荐文章于 2024-05-22 11:10:05 发布

xuganggogo

最新推荐文章于 2024-05-22 11:10:05 发布

阅读量123

点赞数

分类专栏： Javascript 文章标签： JavaScript XHTML HTML ViewUI

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>