<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript">
function addSpot() {
var $table = $("#spots"),index = $table.find("tr").length;
var $tr = $("<tr id = '" + index + "'><td></td><td></td></tr>");
$tr.find("td").each(function(i,n){
if(i === 0){
var $name = $("<input type='text' maxlength='50' class='required' />");
$name.attr("name","list["+index+"].name");
$(n).append($name);
}else{
var $id = $("<input type='hidden' />");
$id.attr("name","list["+index+"].id");
$(n).append($id);
var $a = $("<a href='javascript:void(0);'><font color='red'>删除</font></a>");
$a.attr("onclick","delSpot(this);");
$(n).append($a);
}
});
$table.append($tr);
};
function delSpot(a) {
var $delTr = $(a).parent().parent();
$delTr.nextAll().each(function(i,n){
var index = parseInt($(n).attr("id"));
$(n).attr("id",index-1);
var $name = $(n).find("[name='list["+index+"].name']");
$name.attr("name","list["+(index-1)+"].name");
var $id = $(n).find("[name='list["+index+"].id']");
$id.attr("name","list["+(index-1)+"].id");
});
$delTr.remove();
}
</script>
</head>
<body>
<form>
<table id="spots" style="border: 0;">
</table>
<input class="btn btn-primary" type="button" onclick="addSpot()" value="新增" />
</form>
</body>
</html>