<style>
html{ background:none;}
table{
width:100%;
border:1px solid #CCC;
border-top:none;
border-left:none;
}
table td, table th{
text-align:left;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
padding:10px;
height:50px;
font-size:16px;
}
table td a{ color:#428bca;}
table td span{ width:30%; display:inline-block; height:30px; line-height:30px;}
table td span input{ margin-top:2px;}
table th{
min-width:80px;
background:#428bca;
font-weight:200;
color:#fff;
}
.text{ padding:10px; margin:10px; height:auto; width:90%;}
.btn{padding:6px 15px}
</style>
<div class="detail">
<div style="border:2px;
border-color:#00CC00;
margin-left:10%;
margin-top:20px">
<input type="button" id="but" value="增加"/>
</div>
<table id="tab" class="tab" width="80%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20%">序号</td>
<td>金额</td>
<td>有效期</td>
<td>描述</td>
<td>操作</td>
</tr>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
//表格增加
$(document).ready(function(){
//<tr/>居中
$("#tab tr").attr("align","center");
//增加<tr/>
$("#but").click(function(){
var _len = $("#tab tr").length;
$("#tab").append("<tr id="+_len+" align='center'>"
+"<td>"+_len+"</td>"
+"<td><input type='text' name='amount_money[]' /></td>"
+"<td><input type='text' name='promotion_effective_day[]' />天</td>"
+"<td><input type='text' name='desc[]' /></td>"
+"<td><a href=\'#\' οnclick=\'deltr("+_len+")\'>删除</a></td>"
+"</tr>");
})
})
//删除<tr/>
var deltr =function(index)
{
var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//删除当前行
for(var i=index+1,j=_len;i<j;i++)
{
var nextTxtVal = $("#desc"+i).val();
$("tr[id=\'"+i+"\']")
.replaceWith("<tr id="+(i-1)+" align='center'>"
+"<td>"+(i-1)+"</td>"
+"<td><input type='text' name='amount_money[]' /></td>"
+"<td><input type='text' name='promotion_effective_day[]' /></td>"
+"<td><input type='text' name='desc[]' /></td>"
+"<td><a href=\'#\' οnclick=\'deltr("+(i-1)+")\'>删除</a></td>"
+"</tr>");
}
}
</script>