javascript应用往表格中出入行，每次都插入第一行。

最新推荐文章于 2025-04-13 12:00:00 发布

原创最新推荐文章于 2025-04-13 12:00:00 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #generator #html #button #function

本文介绍了一种使用JavaScript为HTML页面中的表格动态添加行的方法。通过一个简单的按钮点击事件，可以实现在表格的第一行位置插入新行，并填充指定的数据内容。此方法适用于需要动态更新表格数据的场景。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

 <script type="text/javascript">
	var index = 1;
	function add() {
		var tableId = document.getElementById("tableId"); //拿到要插入表的id
		var newtr = tableId.insertRow(0); //要插入的第几行，0代表插入的是第一行
		for(var i=0; i<2; i++) {
			var tableId = newtr.insertCell(i);    //要插入第一行的，第几列。 
			tableId.innerHTML="liang" + index;  //要插入的内容
		}
	index = index + 1;
	}
 </script>

 </head>
 <body>
	<table id="tableId">
		<tr>
			<td>
				姓名
			</td>
			<td>
				姓名
			</td>
		</tr>
	</table>
	<input type="button" value="点我" onclick="add()"/>
 </body>
</html>