HTML+Javascript复制表格行并清空form表单input/select值.

最新推荐文章于 2026-06-26 04:16:32 发布

原创最新推荐文章于 2026-06-26 04:16:32 发布 · 4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html #function #button #border

Web 同时被 2 个专栏收录

28 篇文章

订阅专栏

Javascript

11 篇文章

订阅专栏

本文介绍了一种在网页表单中实现动态增加输入行的方法，并通过JavaScript实现了复制表格行的功能，同时确保新行的数据被清空。

需求是这样的:

数据库端是一对多(主表和从表), 要求页面上用一个表单输入完成. 还要能够动态增加输入行.

页面上, 需要解决的主要是下面两个问题:

- 动态复制行, 追加到表格末尾
- 对复制的行清空原有的输入

下面是一个测试页面:

<body> <form name="abc" action=""> <table width="200" border="1" id="table1"> <tr> <td><input type="text" name="txt_a" id="textfield" value="aaa"/></td> <td><input type="text" name="txt_b" id="textfield2" value="bbb" /></td> <td><input type="text" name="txt_c" id="textfield3" value="ccc" onclick="m_TestParentNode(this);"/></td> <td><select name="sel_a"><option value="a">aaa</option><option value="b">bbb</option></select></td> </tr> </table> <table width="200" border="1" id="myTable"> <tr id="row_0"> <td><input type="text" name="txt_a" id="textfield" /></td> <td><input type="text" name="txt_b" id="textfield2" /></td> <td><input type="text" name="txt_c" id="textfield3" /></td> <td><select name="sel_a"><option value="a">aaa</option><option value="b">bbb</option></select></td> </tr> </table> <table> <tr> <td><input name="btnAdd" type="button" value="Add Row" onclick="m_AddRow();"/></td> <td><input name="btnDel" type="button" value="Del Row" onclick="m_DelRow();"/></td> <td> </td> </tr> </table> </form> <mce:script language="javascript"></mce:script> </body>