cloneNode實現表格增加刪除效果_javascript技巧

來源:互聯網
上載者:User
<%@ page contentType="text/html; charset=gb2312" %> <html> <head> <title>查詢時段</title> <script language="JavaScript"> function changeValue1(obj){ if(obj.value == 0){ document.getElementById("result").value = "f117"; }else { document.getElementById("result").value = "gaofei"; } } function changeValue(obj){ if(obj.value == 0){ obj.parentElement.parentElement.cells[1].children[0].value = "f117"; }else if(obj.value == 1){ obj.parentElement.parentElement.cells[1].children[0].value = "gaofei"; }else obj.parentElement.parentElement.cells[1].children[0].value = ""; } function insertrow(){ var newrow = document.all.tbl.rows[0].cloneNode(true); //複製一行 document.all("newTB").appendChild(newrow); //添加剛才複製的一行 } function delerow(){ var numrow = document.all("newTB").rows.length; if (numrow == 0) { alert("此行無法刪除!"); return false;} document.all("newTB").deleteRow(numrow-1); } </script> </head> <body class="dialog_body"> <form method="POST" onSubmit="return doSubmit(this)"> <fieldset > <legend>查詢條件</legend> <div align="center" class="inputblock" > <table border="1" width="900" cellpadding="0" cellspacing="0" class="table"> <tr> <td class="title" width="16%">列表框</td> <td class="title" width="16%">結果</td> </tr> </table> <table border="1" width="900" cellpadding="0" cellspacing="0" class="table"> <tbody id="tbl"> <tr> <td width="16%"> <select id="pid" name="project" onchange="changeValue(this)"> <option value=""></option> <option value="0">人員編號</option> <option value="1">姓名</option> </select> </td> <td width="16%"> <input id="result" type="text" value="" readonly="true"> </td> </tr> </tbody> <tbody id="newTB"> </tbody> </table> </div> </fieldset> <div align="right" > <input type="button" onClick="insertrow();" value="增加一行"> <input type="button" onClick="delerow();" value="刪除一行"> </div> </form> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.