jquery實作增加刪除行的方法_jquery

本文實例講述了jquery實作增加刪除行的方法。分享給大家供大家參考。具體分析如下：

最近做一個投票管理的模組，需要加入問題選項，為了方便，就簡單地實現了表格行的新增、刪除。

註：需引入jquery.js

先上效果圖：(form中預設有4行)

表單代碼：

複製程式碼 程式碼如下:

 
     
          
             
             
             
         
          
             
             
             
         
          
             
             
             
         
          
             
             
             
         
          
             
             
             
         
    表> 
   

 
        新增一行 
   

 

JS代碼：

複製程式碼 程式碼如下:

var rowCount=4;  //行數預設4行 
  
//新增行 
function addRow(){ 
    rowCount ; 
var newRow='

'; 
    $('#optionContainer').append(newRow); 
} 
 
//刪除行 
function delRow(rowIndex){ 
    $("#option" rowIndex).remove(); 
    rowCount--; 
}

要注意的是，表單的

中需要定義ID，如果預設有行的，就如程式碼所示有規律地定義好ID，這樣可以方便新增一行的時候定義新行ID。

JS中要定義一個行數變量，因為我的表單中預設了4行（第一行，即id='option0'這行可以不用管），所以JS中定義的rowCount預設為4.

OK，完事。就如此的簡單。

另外，如果需要在指定位置增加行，需要這麼寫

複製程式碼 程式碼如下:

$("#tab tr").eq(-2).after("

");

-2就是在倒數第二個tr後面增加行。
tab是表格的id

希望本文所述對大家的jQuery程式設計有所幫助。

類別問題                 (單選)                  (複選)：	${問題}
選項1：
選項2：
選項3：
選項4：
選項' rowCount ':		刪除
關鍵字名稱：	*