js動態增加刪除行

來源:互聯網
上載者:User
js動態增加刪除行代碼,很實用。

所做過的多重專案中均用到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>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。