cloneNode实现表格增加删除效果

最新推荐文章于 2022-09-20 09:59:12 发布

iteye_2903

最新推荐文章于 2022-09-20 09:59:12 发布

阅读量257

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_2903/article/details/82617819

版权

javascript 专栏收录该内容

112 篇文章 1 订阅

订阅专栏


 <%@   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>