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

标签：html   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>

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

标签：html   jquery   table   表格   

原文地址：http://blog.csdn.net/arthuralston2015/article/details/46118073