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实现表格增加删除效果

使用Dropzone.js上传的示例代码
本篇文章主要介绍了使用Dropzone.js上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Bootstrap 中data-[*] 属性的整理
本文给大家收藏整理了关于Bootstrap 中data-[*] 属性的相关知识，感兴趣的朋友一起看看吧
2018-03-03
通过百度地图获取公交线路的站点坐标的js代码
通过百度地图获取公交线路的站点坐标的js代码，需要的朋友可以参考下
2012-05-05
JS数组索引检测中的数据类型问题详解
这篇文章主要给大家介绍了关于JS数组索引检测中的数据类型问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
JS动态修改表格cellPadding和cellSpacing的方法
这篇文章主要介绍了JS动态修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
js实现文本框支持加减运算的方法
这篇文章主要介绍了js实现文本框支持加减运算的方法,可实现文本框输入加减运算式同时右侧实时显示对应计算结果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
javascript搜索框效果实现方法
这篇文章主要介绍了javascript搜索框效果实现方法,可实现显示默认提示文字的搜索框效果,非常简单实用,需要的朋友可以参考下
2015-05-05
javascript之AJAX框架使用说明
javascript之AJAX框架使用说明,需要的朋友可以参考下.`
2010-04-04
js屏蔽退格键(backspace或者叫后退键与F5)
今天有工作人员反馈后台编辑文章的时候，多按了几下退格键，然后当前编辑的页面都返回到上一页了，导致刚刚添加的内容全部丢失，今天正好有空给整理一下
2019-02-02
Bootstrap模块dropdown实现下拉框响应
这篇文章主要为大家详细介绍了Bootstrap下拉框模块dropdown实现下拉框响应，感兴趣的朋友可以参考一下
2016-05-05

cloneNode实现表格增加删除效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具