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

微信小程序身份证验证方法实现详解
这篇文章主要介绍了微信小程序身份证验证方法实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-06-06
基于JavaScript实现交互式博客
在Web开发中,JavaScript（JS）是一种至关重要的编程语言,它使网页具有交互性,本文主要介绍了如何使用JavaScript实现一个交互式博客,需要的可以了解下
2024-01-01
fullCalendar日历插件玩法示例解析
这篇文章主要介绍了fullCalendar日历插件玩法示例解析,包括Fullcalendar安装,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01
JavaScript快速排序
JavaScript快速排序...
2007-01-01
查找Oracle高消耗语句的方法
这篇文章主要介绍了查找Oracle高消耗语句的方法,需要的朋友可以参考下
2014-03-03
JavaScript基于扩展String实现替换字符串中index处字符的方法
这篇文章主要介绍了JavaScript基于扩展String实现替换字符串中index处字符的方法,涉及javascript使用substr方法针对字符串进行替换操作的相关实现技巧,需要的朋友可以参考下
2017-06-06
javascript table排序这个更简单了，不用改变现在的表格结构
另外一个table排序，这个更简单了，不用改变现在的表格结构,来自国外的代码。
2010-04-04
JavaScript实现简单网页版计算器
这篇文章主要介绍了JavaScript实现简单网页版计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
让mocha支持ES6模块的方法实现
这篇文章主要介绍了让mocha支持ES6模块的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
Django 中的templates使用示例详解
Django模板系统提供了一套丰富的工具集,能够帮助开发者将动态数据有效地渲染到HTML页面中,它通过特殊的语法支持变量插入、逻辑标签和过滤器的使用,本文给大家介绍Django 中的templates使用,感兴趣的朋友一起看看吧
2024-10-10

cloneNode实现表格增加删除效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具