HTML+Javascript複製表格行並清空form表單input/select值.

原創

bruni

2020-02-22 13:34

需求是這樣的:

數據庫端是一對多(主表和從表), 要求頁面上用一個表單輸入完成. 還要能夠動態增加輸入行.

頁面上, 需要解決的主要是下面兩個問題:

- 動態複製行, 追加到表格末尾
- 對複製的行清空原有的輸入

下面是一個測試頁面:

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

bruni

發佈了226 篇原創文章 · 獲贊 7 · 訪問量 44萬+

私信關注

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

HTML+Javascript複製表格行並清空form表單input/select值.

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

解決CVS訪問慢的問題

Eclipse javadoc plugin: jautodoc

解決MyEclipse中"Open In Explorer"問題

hibernate.org被黑了?

Oracle收購Java

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結