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 οnclick="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="确定" /><input 29 type="button" onClick="history.back();" value="返回" /></td> 30 </tr> 31 </table> 32 </form>
页面展示: