jq动态添加或者删除数据行后表单name值如何按顺序排列比如brand1，brand2

qq_37935118 2017-03-16 09:39:46

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.forecast-option{

	width:209px;

	height:30px;

	padding-left:5px;

	float:left;

	}

.forecast-tip{

	color:#FF6709;

	margin-left:15px;

	line-height:30px;

	float:left;

	}

.forecast{

	padding:0 20px;

	margin-bottom:20px;

	overflow:hidden;

	}

.forecast h2{

	font-size:14px;

	float:left;

	}

.forecast-add{

	color:#fff;

	background:#FF6709;

	font-weight:bold;

	padding:5px 8px;

	border:none;

	float:right;

	}

.forecast-td{

	height:30px;

	padding-left:5px;

	border:1px solid #ccc;

	}

.forecast-margin{

	margin:0 20px;

	}

.forecast-margin li{

	height: auto !important;

	}

.forecast-margin li span{

	padding:5px 0 !important;

}

.forecast-del{

	color:#FF6709;

	font-size:16px;

	border:none !important;

	}

.forecast-submit{

    color: #fff;

    padding: 6px 18px;

    margin: 30px 30px 10px 130px;

    border: none;

    border-radius: 5px;

    background: #FF6709;

	}

input{

	color:#FF6709;

	}

</style>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script>

        $(function(){  

            //第一次添加行的行序号  

            var i = 2;  

            $('#addTable').bind('click', function(){  

                //添加行  

                $(this).parent().next().next().append('<li><span class="td-cell td4"><input type="text" name="brand'+i+'" value="" class="forecast-td" size="22" placeholder="请输入手机号码"></span><span class="td-cell td5"><input type="text" name="title'+i+'" value="" class="forecast-td" size="28" placeholder="可直接复制网站商品名称"></span><span class="td-cell td2"><input type="text" name="amount'+i+'" value="" class="forecast-td" size="8" placeholder="填写数字"></span><span class="td-cell td3"><input type="text" name="price'+i+'" value="" class="forecast-td" size="15" placeholder="填写人民币"></span><span class="td-cell td3"><input type="text" name="model'+i+'" value="" class="forecast-td" size="15" placeholder="例一盒2条或500ml"></span><span class="td-cell td3 forecast-del"><input type="button" id="delRow'+ i +'" value="删除" style="background:none; color:#FF6709; border:none; font-size:16px; cursor:pointer;"/></span></li>');  

                //行序号增加  

                i++;  

                //添加成功之后排序（避免删除之后，i的值没变，下次添加的时候序号不对）  

                $('#table li').each(function(index){  

                    //循环每一个tr，给序号重新赋值  

                    $(this).find('li:first').text(index + 1);  

                });  

                //新增加的删除按钮  

                $('#delRow' + (i - 1)).bind('click', function(){  

                    //获取删除按钮对应的当前行  

                    var currentTr = $(this).parent().parent();  

                    //删除当前行  

                    currentTr.remove();  

                    //删除成功之后进行排序  

                    $('#table li').each(function(index){  

                        //循环每一个tr，给序号重新赋值  

                        $(this).find('li:first').text(index + 1);  

                    });  

                });  

                  

            });  

        }); 

	

</script>

</head>



<body>

           <form>

            <div class="forecast">

            	<h2>商品申报：</h2>

                <input type="button" value="新增一行商品" id="addTable" class="forecast-add"/>

            </div>

            <ul class="head-list forecast-margin">

            	<li class="td4">品牌</li>

            	<li class="td5">商品名称</li>

            	<li class="td2">数量</li>

            	<li class="td3">价格</li>

            	<li class="td3">规格型号</li>

            	<li class="td3">操作</li>

            </ul>

            <ul class="table-list forecast-margin" id="table">

            	<li>

                	<span class="td-cell td4"><input type="text" name="brand0" value="" class="forecast-td" size="22" placeholder="请输入手机号码"></span>

                	<span class="td-cell td5"><input type="text" name="title0" value="" class="forecast-td" size="28" placeholder="可直接复制网站商品名称"></span>

                	<span class="td-cell td2"><input type="text" name="amount0" value="" class="forecast-td" size="8" placeholder="填写数字"></span>

                	<span class="td-cell td3"><input type="text" name="price0" value="" class="forecast-td" size="15" placeholder="填写人民币"></span>

                	<span class="td-cell td3"><input type="text" name="model0" value="" class="forecast-td" size="15" placeholder="例一盒2条或500ml"></span>

                	<span class="td-cell td3 forecast-del">

                        <input type="button" value="删除"  onclick="del(event)" style="background:none; color:#FF6709; border:none; font-size:16px; cursor:pointer;"/>

                    </span>

                </li>

                

            </ul>

                <input type="submit" value="提交"  class="forecast-submit"/>

            </form>

</body>

</html>