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

最新推荐文章于 2023-03-14 16:45:40 发布

三易的博客

最新推荐文章于 2023-03-14 16:45:40 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript generator html button function

本文链接：https://blog.youkuaiyun.com/liang_love_java/article/details/7972270

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>