动态增加删除行 js

来源:互联网 发布:四知翻译 编辑:程序博客网 时间:2024/05/19 13:25

所做过的多个项目中均用到js动态添加删除行的应用,在写过多种方案后,最终整理出这个最为方便应用的方案,以备日后拿来便用:

以下是DEMO全部代码:


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

 

原创粉丝点击