cloneNode实现表格增加删除效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > cloneNode实现表格增加删除效果

技术文章搜索

关键字

Javascript 中的 cloneNode实现表格增加删除效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 62 ::

收藏到网摘: n/a

用js得到网页中所有的div的id 支持IE和FF的div＋css选项卡

点击运行可以看到效果:

<%@ 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 style="margin:5px;width:630px;"> <legend>查询条件</legend> <div align="center" class="inputblock" style="width:930;height:150;overflow:auto;"> <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" style="margin:10px;"> <input type="button" onClick="insertrow();" value="增加一行"> <input type="button" onClick="delerow();" value="删除一行"> </div> </form> </body> </html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

用js得到网页中所有的div的id 支持IE和FF的div＋css选项卡

Javascript 中的 cloneNode实现表格增加删除效果

评论 (0) All