Home > Developer > JavaScript
The requirement is as follows:
The database end is a one-to-many (master table and slave table) that requires a form input on the page. The input rows must also be dynamically added.
On the page, you need to solve the following two problems:
-Dynamically copy rows and append them to the end of the table.
-Clear the original input for the copied row
The following is a test page:
<Body> <br/> <form name = "ABC" Action = ""> <br/> <Table width = "200" border = "1" id = "Table1"> <br/> <tr> <br/> <TD> <input type = "text" name = "txt_a" id = "textfield" value = "AAA"/> </TD> <br/> <TD> <input type = "text" name = "txt_ B" id = "textfield2" value = "BBB"/> </TD> <br /> <TD> <input type = "text" name = "txt_c" id = "textfield3" value = "CCC" onclick = "m_testparentnode (this ); "/> </TD> <br/> <TD> <select name =" sel_a "> <option Val UE = "A"> AAA </option> <option value = "B"> BBB </option> </SELECT> </TD> <br/> </tr> <br/> </table> <br/> <Table width = "200" border = "1" id = "mytable"> <br/> <tr id = "row_0 "> <br/> <TD> <input type =" text "name =" txt_a "id =" textfield "/> </TD> <br/> <TD> <input type = "text" name = "txt_ B" id = "textfield2"/> </TD> <br/> <TD> <input type = "text" name = "txt_c "id =" textfield3 "/> </TD> <br/> <TD> <select name =" sel_a "> <option value =""> AAA </option> <option value = "B"> BBB </option> </SELECT> </TD> <br/> </tr> <br/> </table> <br/> <Table> <br/> <tr> <br/> <TD> <input name = "btnadd" type = "button" value = "add row "onclick =" m_addrow (); "/> </TD> <br/> <TD> <input name =" btndel "type =" button "value =" del row "onclick =" m_delrow (); "/> </TD> <br/> <TD> </TD> <br/> </tr> <br/> </table> <br/> </ form> <br/> <MCE: script Language = "JavaScript"> <! -- <Br/> var maxrows = 5; <br/> function m_addrow () {<br/> var TBL = document. getelementbyid ("mytable "). tbodies [0]; <br/> var seq = TBL. rows. length; <br/> If (TBL. rows. length >=maxrows) {<br/> return; <br/>}< br/> try {<br/> var newnode = TBL. rows [0]. clonenode (true); <br/> newnode. setattribute ("ID", "Row _" + SEQ); <br/> m_clearinputs (newnode); <br/> TBL. appendchild (newnode); <br/>}< br/> catch (e) {<br/> alert (E. message); <br/>}</P> <p> function m_delrow () {<br/> var TBL = document. getelementbyid ("mytable "). tbodies [0]; <br/> var Index = TBL. rows. length; <br/> TBL. deleterow (index-1); <br/>}</P> <p> function m_clearinputs (p_node) {<br/> var m_node; <br/> If (p_node.nodetype) {<br/> m_node = p_node; <br/>}< br/> else {<br/> m_node = document. getelementbyid (p_node); // The id <br/>}</P> <p> var I, elm, elements; </P> <p> elements = m_node.getelementsbytagname ('input'); <br/> for (I = 0, elm; elm = elements. item (I ++);) <br/>{< br/> If (Elm. getattribute ('type') = "text") <br/>{< br/> Elm. value = ''; <br/>}</P> <p> elements = m_node.getelementsbytagname ('select '); <br/> for (I = 0, elm; elm = elements. item (I ++);) <br/>{< br/> Elm. options. selectedindex = 0; <br/>}</P> <p> function m_testparentnode (p_node) {<br/> // alert (p_node.parentnode.innerhtml ); <br/> // alert (p_node.parentnode.parentnode.innerhtml); <br/> var nextsibling; <br/> If (p_node.parentnode.nextsibling.nodetype = 3) {// FF <br/> nextsibling = p_node.parentnode.nextsibling.nextsibling; <br/>}< br/> else {<br/> nextsibling = p_node.parentnode.nextsibling; <br/>}< br/> alert (nextsibling. innerhtml); <br/>}< br/> // --> </MCE: SCRIPT> <br/> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
