js+jquery实现增加或删除表格中的一行数据

 

jquery和js代码如下（该方法有bug，至少要留一个模板，否则，之后不能再新增行）：

function setIndex() {    var i = 2;    $(".rsnum").each(function(){    //增加一行后重新更新序号1,2,3......        $(this).attr('value',i++);    })}$(document).ready(function() {    $(".addmid").click(function(){        $tr = $(".midTR").eq(0).clone();//首先获取相同类的元素，并的到第一个节点元素。复制该节点元素        /* $tr.removeClass("midTR");//移除该元素的class        $tr.addClass("midTR0"); *///添加新的class        $(this).parent().parent().before($tr);//找到该节点的父节点，并在之前添加$tr元素        setIndex();    });});function delMid(nowTr){    $ss = $(nowTr).parent().parent().remove();//移除该节点元素    setIndex();}

经过改良的js代码如下（该方法思路为：将最后一行修改样式为中间站的样式）：

function setIndex() {var i = 2;$(".rsnum").each(function(){    //增加一行后重新更新序号1,2,3......$(this).attr('value',i++);$(this).attr('name','routeSites['+(i-3)+'].rsnum');//修改属性名，并赋予角标，从而通过Springmvc可以获取list值$(this).parent().parent().find('select').attr('name','routeSites['+(i-3)+'].site.snum');$(this).parent().parent().parent().find('input').eq(1).attr('name','routeSites['+(i-3)+'].distance');$(this).parent().parent().parent().find('input').eq(2).attr('name','routeSites['+(i-3)+'].rstime');})}$(document).ready(function() {setIndex();$(".addmid").click(function(){//该方法可以将终点站那一行数据复制，并修改为中间站的样式$tr = $(".endTR").clone();//复制该节点元素$tr.removeClass("endTR");//移除该节点的class$tr.find('td').eq(0).find('input').remove();$tr.find('td').eq(0).find('span').html('第<input type="text" class="rsnum" readonly="readonly" style="border: 0;width: 15px">站');$tr.find('td').eq(3).html('<input onclick="delMid(this)" type="button" value="删除当前站点" />');$(this).parent().parent().before($tr);setIndex();});});function delMid(nowTr){$ss = $(nowTr).parent().parent().remove();setIndex();}

html代码如下：

 1 <form name="form2" action="addRoute" method="post"> 2     路线名称<input type="text" name="rname" class="input4">  3     类型<select name="rtype"> 4         <option value="省内">省内</option> 5         <option value="省外">省外</option> 6     </select> 7     <table border="1" id="tables" class="tabs"> 8         <tr> 9             <td>起始站点<input type="text" name="stratSname" class="input4"></td>10             <td></td>11             <td></td>12             <td></td>13         </tr>14         <tr class="midTR">15             <td>第<input type="text" class="rsnum" name="rsnum" value="2" readonly="readonly" style="border: 0;width: 15px">站16                 <input type="text" name="sname" class="input4"></td>17             <td>距上一站距离<input type="text" name="distance" class="input4"></td>18             <td>预计时间<input type="text" name="rstime" class="input4"></td>19             <td><input onclick="delMid(this)" type="button" value="删除当前站点" /></td>20         </tr>21         <tr class="endTR">22             <td>终点站<input type="text" name="sname" class="input4"></td>23             <td>距上一站距离<input type="text" name="distance" class="input4"></td>24             <td>预计时间<input type="text" name="rstime" class="input4"></td>25             <td><input class="addmid"  type="button" value="增加一个站点" /></td>26         </tr>27         <tr>28             <td colspan="6"><input type="submit" value="确定" /><input29                 type="button" onClick="history.back();" value="返回" /></td>30         </tr>31     </table>32 </form>

页面展示：

1.