Jquery实现表格行的添加、删除

JS、Jquery技术学习 https://www.itkc8.com  

先上效果图：(form中默认有4行)

 

表单代码：

 

1. <div class="oz-form-fields"  style="width:450px;padding-top: 5px">  
2.     <table cellpadding="0" cellspacing="0" style="width:450px;" id="optionContainer">  
3.         <tr id="option0">   
4.             <td class="oz-form-topLabel">所属问题  
5.                 <c:if test="${questionType=='radio'}">(单选)</c:if>  
6.                 <c:if test="${questionType=='checkbox'}">(复选)</c:if>：  
7.             </td>  
8.             <td class="oz-property" >  
9.                 ${question}  
10.             </td>  
11.             <td></td>  
12.         </tr>  
13.         <tr id="option1">   
14.             <td class="oz-form-topLabel">选项1：</td>  
15.             <td class="oz-property" >  
16.                 <input type="text"  style="width:300px">  
17.             </td>  
18.             <td></td>  
19.         </tr>  
20.         <tr id="option2">   
21.             <td class="oz-form-topLabel">选项2：</td>  
22.             <td class="oz-property" >  
23.                 <input type="text"  style="width:300px" >  
24.             </td>  
25.             <td></td>  
26.         </tr>  
27.         <tr id="option3">   
28.             <td class="oz-form-topLabel">选项3：</td>  
29.             <td class="oz-property" >  
30.                 <input type="text"  style="width:300px">  
31.             </td>  
32.             <td></td>  
33.         </tr>  
34.         <tr id="option4">   
35.             <td class="oz-form-topLabel">选项4：</td>  
36.             <td class="oz-property" >  
37.                 <input type="text"  style="width:300px">  
38.             </td>  
39.             <td></td>  
40.         </tr>  
41.     </table>  
42.     <div style="text-align: center;">  
43.         <a href="#" οnclick="addRow()">添加一行</a>  
44.     </div>  
45. </div>      

 

 

 

 

 

 

JS代码：

 

1. var rowCount=4;  //行数默认4行  
2.   
3. //添加行  
4. function addRow(){  
5.     rowCount++;  
6.     var newRow='<tr id="option'+rowCount+'"><td class="oz-form-topLabel">选项'+rowCount+'：</td><td class="oz-property" ><input type="text"  style="width:300px"></td><td><a href="#" οnclick=delRow('+rowCount+')>删除</a></td></tr>';  
7.     $('#optionContainer').append(newRow);  
8. }  
9.   
10. //删除行  
11. function delRow(rowIndex){  
12.     $("#option"+rowIndex).remove();  
13.     rowCount--;  
14. }  

 

 

需要注意的是，表单的<tr>中需要定义ID，如果默认有行的，就如代码所示有规律地定义好ID，这样可以方便添加一行的时候定义新行ID。

JS、Jquery技术学习 https://www.itkc8.com  

JS中要定义一个行数变量，因为我的表单中默认了4行（第一行，即id='option0'这行可以不用管），所以JS中定义的rowCount默认为4.