js 动态增加删除表格(cloneNode)

<html>
<head>
  <title>Ace Test</title>
<script language="JavaScript">   
  var cGetRow=-99999;
  function insertrow(){
  var newrow = document.all.ACE_HIDDEN_TABLE.rows[0].cloneNode(true); //克隆一行
  document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
  }
   

  function GetRow(){
//获得行索引
//两个parentElement分别是TD和TR,rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
    cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
   
    DelRow(cGetRow);//点击checkbox时,直接删除行。
  }
  function DelRow(iIndex){
//删除一行
if(iIndex==-99999){
   alert("系统提示:没有选中行号!");
}else{
   newTB.deleteRow(iIndex);
   iIndex==-99999;//将rowIndex恢复默认值。
}
  }
  </script>
</head>

<body class="dialog_body">
  <form method="POST" onSubmit="return   doSubmit(this)">

   
     <table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
    
      <!-- 隐藏table,用于克隆的行 begin -->
      <tbody id="ACE_HIDDEN_TABLE" style="display:none">
       <tr>
        <td><input type="checkbox" onclick="GetRow()"/></td>
        <td width="16%">
         <select id="pid" name="project"">
          <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>
     </table>
     <!-- 隐藏table,用于克隆的行 end -->
    
     <table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
      <!-- 插入新行的区域 begin -->
      <tbody id="newTB">
      </tbody>
      <!-- 插入新行的区域 end -->
     </table>

   <div align="right" style="margin:10px;">
    <input type="button" onClick="insertrow();" value="增加一行">
    <input type="button" onClick="DelRow(cGetRow);" value="删除一行">
   </div>
  
  </form>
</body>
</html>

你可能感兴趣的:(clone)