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('第站');
		$tr.find('td').eq(3).html('');
		$(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>

页面展示：

1.