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

最新推荐文章于 2023-01-02 16:22:09 发布

bruni

最新推荐文章于 2023-01-02 16:22:09 发布

阅读量4k

点赞数

分类专栏： Web Javascript 文章标签： javascript html function button border table

本文链接：https://blog.youkuaiyun.com/bruni/article/details/3932644

版权

Web 同时被 2 个专栏收录

28 篇文章

订阅专栏

Javascript

11 篇文章

订阅专栏

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

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

需求是这样的:

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

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

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

下面是一个测试页面:

<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" οnclick="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" οnclick="m_AddRow();"/></td> <td><input name="btnDel" type="button" value="Del Row" οnclick="m_DelRow();"/></td> <td> </td> </tr> </table> </form> <mce:script language="javascript"></mce:script> </body>