cloneNode实现表格增加删除效果

更新时间：2006年11月18日 00:00:00 作者：

<%@   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需再刷新一下页面才能执行]

您可能感兴趣的文章:

cloneNode实现表格增加删除效果

js内存泄露的几种情况详细探讨
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束，由于浏览器垃圾回收方法有bug，会产生内存泄露，下面与大家详细探讨下内存泄露的几种情况
2013-05-05
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
这篇文章主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下
2016-02-02
$.browser.msie 为空或不是对象问题的多种解决方法
因为使用了jquery判断ie，所以使用了$.browser.msie但是在jquery 1.9以后的版本中不再支持$.browser而使用$.browser来替代
2017-03-03
根据选择不同的下拉值出现相对应的文本输入框
根据用户选择不同的下拉值，出现相应的文本输入框，在某些情况下比较实用，本文为大家写了个，有需求的朋友可以参考下
2013-08-08
一篇文章弄懂javascript中的执行栈与执行上下文
这篇文章主要给大家介绍了关于javascript中执行栈与执行上下文的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-08-08
动态显示可输入的字数提示还可以输入的字数
这篇文章主要介绍了动态显示可输入的字数提示还可以输入的字数,需要的朋友可以参考下
2014-04-04
javascript中Promise使用详解
这篇文章主要介绍了javascript中Promise使用详解，关于Promise的使用相关的知识点下面文章内容介绍详细具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
解决layui弹出层layer的area过大被遮挡的问题
今天小编就为大家分享一篇解决layui弹出层layer的area过大被遮挡的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
python实现迭代法求方程组的根过程解析
这篇文章主要介绍了python实现迭代法求方程组的根过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11
JS监听浏览器关闭、刷新及切换标签页触发事件代码示例
浏览器是客户端,客户端的操作服务器是监听不到的,所以可以用js来监听,js代码监听浏览器关闭或者刷新,这篇文章主要给大家介绍了关于JS监听浏览器关闭、刷新及切换标签页触发事件的相关资料,需要的朋友可以参考下
2023-11-11