需求是這樣的:
資料庫端是一對多(主表和從表), 要求頁面上用一個表單輸入完成. 還要能夠動態增加輸入行.
頁面上, 需要解決的主要是下面兩個問題:
- 動態複製行, 追加到表格末尾
- 對複製的行清空原有的輸入
下面是一個測試頁面:
<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 value="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="a">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 /> }<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 /> }<br /> }</p><p>elements = m_node.getElementsByTagName('select');<br />for( i=0, elm; elm=elements.item(i++); )<br />{<br />elm.options.selectedIndex=0;<br />}<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>