cloneNode实现表格增加删除效果

时间：2021-01-22 12:27:43|栏目：JavaScript代码|点击：次

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

上一篇：JavaScript作用域与作用域链深入解析

栏目：JavaScript代码

下一篇：用Javascript读取CheckBox数组的值的代码(兼容IE与firefox)

本文标题：cloneNode实现表格增加删除效果

本文地址：http://www.codeinn.net/misctech/49354.html

更多JavaScript代码

JavaScript代码

cloneNode实现表格增加删除效果

阅读排行

推荐教程