javascript 实现 table 增加行

最新推荐文章于 2022-11-19 09:22:57 发布

nono365

最新推荐文章于 2022-11-19 09:22:57 发布

阅读量591

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/nono365/article/details/38684163

版权

这篇博客展示了如何利用 JavaScript 实现 HTML 表格的动态增行功能。通过点击按钮，可以触发 `addRow` 函数，该函数首先获取表格元素，然后复制最后一行并清空输入框的值，最后更新输入框的 ID 和 Name，以保持唯一性，并将新行添加到表格中。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8" />
		<title>test form post</title>
	</head>
	<body>
		<div>
		  <input type="button" name="hush" value="add New Row" onClick='addRow()'>
	    </div>
        <table id='tableA'>
        	<tr >
        		<td><input type="text" name="name" id='name_0' value="name"><td>
        	    <td><input type="text" name="email" id='email_0' value="email"><td>
        	</tr>
       
        </table>


        <script type='text/javascript'>
        	function addRow(){
        	  var tableA = document.getElementById('tableA');//根据ID取table
                  var trs = tableA.getElementsByTagN