`

cloneNode实现表格增加删除效果

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>
分享到：
| 支持IE和FF的div＋css选项卡
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 拷贝节点cloneNode()使用介绍.docx

    javascript 拷贝节点cloneNode()使用介绍.docx

    javascript 拷贝节点cloneNode()使用介绍

    cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,...

    javascript cloneNode()方法的使用

    控件cloneNode（）方法的使用 实例代码。

    JavaScript 用cloneNode方法克隆节点的代码

    以下是cloneNode 方法原型： newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep，布尔值，如果为true，则克隆oldElement 这个及其子节点，否则只可能这个节点本身。 返回值就是一个克隆的节点...

    IE下使用cloneNode注意事项分享

    在开发百度“地裂特效”时，发现了一些匪夷所思的 bug，第一反应是特效本身的代码与页面上原有的脚本发生了冲突，经过调试发现，问题出现在 cloneNode 的应用上

    DOM节点深度克隆函数cloneNode()用法实例

    具体实现方法如下： 代码如下:&lt;html&gt; &lt;head&gt; [removed] function t(){  var nodeul = document.getElementsByTagName(‘ul’)[0];//获取需要复制的UL节点  var newul = nodeul.cloneNode(true);//...

    javascript dom操作之cloneNode文本节点克隆使用技巧

    本克隆函数cloneNode他有两个参数——true or false

    JavaScript实现动态添加Form表单元素的方法示例

    情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode[removed]; objNode.cloneNode(); objNode.removeAtrribute(); ...

    Opera下cloneNode的bug

    说说我发现的一个关于 cloneNode 的问题。 问题: 假设我们有一个 Form 节点（node）的引用，姑且名之为 elForm，现在需要克隆一份，可以这么做：var elFormClone = elForm.cloneNode(true). 在插入这份克隆到 DOM ...

    动态操作dom

    //2、appendChild:把创建的标签添加到容器的末尾 // 容器.appendChild(newEle) //3、insertBefore:把创建的标签增加到容器中某一个标签的前面 // 容器.insertBefore(newEle,oldEle) 容器:oldEle.parentNode /...

    winxp窗口效果

    在调用init方法之前add的条目，会立即显示，而在init后添加的或使用中动态添加的，都会以动态效果 添加到菜单。 菜单的动作基本分为open(伸出）,close (缩回),extend (变长),shorten(变短); 四种操作可...

    JS增加行复制行删除行的实现代码

    代码如下:var customerInfoMethod ={ //复制增加行 copyrow:function(obj,id) { var rowIndex=obj[removed][removed].rowIndex; var resrow=document.getElementById(id); rowIndex–; var newRow=resrow....

    JavaScript Table行定位效果

    最后我用的方法是新建一个table，并把源tr克隆到新table中，然后通过对新table定位来实现效果。 用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。 程序说明 ...

Magicbox
Global site tag (gtag.js) - Google Analytics