jquery实现增加删除行的方法

本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下：

最近做一个投票管理的模块，需要添加问题选项，为了方便，就简单地实现了表格行的添加、删除。

注：需引入jquery.js

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

表单代码：

 <div class="oz-form-fields"  style="width:450px;padding-top: 5px">  
 
     <table cellpadding="0" cellspacing="0" style="width:450px;" id="optionContainer">  
 
         <tr id="option0">   
 
             <td class="oz-form-topLabel">所属问题  
 
                 <c:if test="${questionType=='radio'}">(单选)</c:if>  
 
                 <c:if test="${questionType=='checkbox'}">(复选)</c:if>：  
 
             </td>  
 
             <td class="oz-property" >  
 
                 ${question}  
 
             </td>  
 
             <td></td>  
 
         </tr>  
 
         <tr id="option1">   
 
             <td class="oz-form-topLabel">选项1：</td>  
 
             <td class="oz-property" >  
 
                 <input type="text"  style="width:300px">  
 
             </td>  
 
             <td></td>  
 
         </tr>  
 
         <tr id="option2">   
 
             <td class="oz-form-topLabel">选项2：</td>  
 
             <td class="oz-property" >  
 
                 <input type="text"  style="width:300px" >  
 
             </td>  
 
             <td></td>  
 
         </tr>  
 
         <tr id="option3">   
 
             <td class="oz-form-topLabel">选项3：</td>  
 
             <td class="oz-property" >  
 
                 <input type="text"  style="width:300px">  
 
             </td>  
 
             <td></td>  
 
         </tr>  
 
         <tr id="option4">   
 
             <td class="oz-form-topLabel">选项4：</td>  
 
             <td class="oz-property" >  
 
                 <input type="text"  style="width:300px">  
 
             </td>  
 
             <td></td>  
 
         </tr>  
 
     </table>  
 
     <div style="text-align: center;">  
 
         <a href="#" onclick="addRow()">添加一行</a>  
 
     </div>  
 
 </div>

JS代码：

复制代码代码如下:

 var rowCount=4;  //行数默认4行  
 
 //添加行  
 
 function addRow(){  
 
     rowCount++;  
 
     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="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';  
 
     $('#optionContainer').append(newRow);  
 
 }  
 
 //删除行  
 
 function delRow(rowIndex){  
 
     $("#option"+rowIndex).remove();  
 
     rowCount--;  
 
 }

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

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

OK，完事。就如此的简单。

另外，如果需要在指定位置增加行，需要这么写

复制代码代码如下:

 $("#tab tr").eq(-2).after("<tr style='border:none;'><td style='width: 120px;border:none;' align='right'><strong>关键词名称：</strong></td><td style='width: 225px;border:none;'><input type='text' name='name' id='smsName' style='width: 135px;'/> <span class='red'> *</span></td></tr>");

-2就是在倒数第二个tr后面增加行。
tab是表格的id

希望本文所述对大家的jQuery程序设计有所帮助。

频道导航

jquery实现增加删除行的方法

您可能感兴趣的文章: