（十七）jquery动态创建，删除 table 行

<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=\'#\' onclick=\'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=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td>"
                            +"</tr>");
        }    

    }
</script>