jquery implements the method of adding and deleting rows_jquery

The example in this article describes the method of adding and deleting rows in jquery. Share it with everyone for your reference. The specific analysis is as follows:

I recently made a voting management module and needed to add question options. For convenience, I simply implemented the addition and deletion of table rows.

Note: jquery.js needs to be introduced

First the rendering: (There are 4 rows in the form by default)

Form code:

Copy code The code is as follows:

 
     
          
             
             
             
         
          
             
             
             
         
          
             
             
             
         
          
             
             
             
         
          
             
             
             
         
   

所属问题                  (单选)                  (复选)：	${question}
选项1：
选项2：
选项3：
选项4：

 
   

 
                                                                                                                                                                                                                                     

JS code:

Copy code The code is as follows:

var rowCount=4; //The default number of rows is 4 rows

//Add row
function addRow(){
rowCount ;
var newRow='Option ' rowCount ':Delete< /a>';
$('#optionContainer').append(newRow);
}

//Delete row
function delRow(rowIndex){
$("#option" rowIndex).remove();
rowCount--;
}

It should be noted that the ID needs to be defined in the of the form. If there is a row by default, the ID should be defined regularly as shown in the code. This will make it easier to define a new row ID when adding a row.

A row count variable needs to be defined in JS, because my form has 4 rows by default (the first row, i.e. the line with id='option0' can be ignored), so the rowCount defined in JS defaults to 4.

OK, done. It's that simple.

In addition, if you need to add a line at a specified position, you need to write like this

Copy code The code is as follows:

$("#tab tr").eq(-2).after(" Keyword name: < /td> < ;span class='red'> *");

-2 is to add a line after the penultimate tr.

tab is the id of the table

I hope this article will be helpful to everyone’s jQuery programming.