jquery動態插入行

這是一個利用jquery動態插入輸入內容的代碼。

html代碼：

<div title="分表2" class="ui-edit" style="padding:20px;" >
<div id="optionContainer" class="ftitle">經驗實體信息(必填，多個網商店鋪需加行)</div>
<div id="option0" class="ui-edit" style="padding-top:5px">
<div class="fitem">
<label>經營網店名稱:</label>
<input class="easyui-validatebox" type="text" name="shopName0" data-options="required:true,validType:'length[1,100]'">
<label>所屬電商平臺名稱:</label>
<input class="easyui-validatebox" type="text" name="platformName0" data-options="required:true,validType:'length[1,100]'">
<label>網店級別（僅限淘寶及天貓商戶）:</label>
<input class="easyui-validatebox" type="text" name="shopLevel0" data-options="required:true,validType:'length[1,100]'">
<label>網店持續經營年限:</label>
<input class="easyui-validatebox" type="text" name="operatingPeriod0" data-options="required:true,validType:'length[1,100]'">
</div>
<div class="fitem">
<label>網店實際所有者（個人名稱或公司名稱):</label>
<input class="easyui-validatebox" type="text" name="shopOwner0" data-options="required:true,validType:'length[1,100]'">
<label>子帳號:</label>
<input class="easyui-validatebox" type="text" name="subAccount0" data-options="required:true,validType:'length[1,100]'">
<label>密碼:</label>
<input class="easyui-validatebox" type="text" name="sbuPassword0" data-options="required:true,validType:'length[1,100]'">
<label>主營業務及主要產品、品牌:</label>
<input class="easyui-validatebox" type="text" name="businessOpera0" data-options="required:true,validType:'length[1,200]'">
</div>
<div class="fitem">
<label>經營地址（如有）:</label>
<input class="easyui-validatebox" type="text" name="businessAddress0" >
<label>倉庫地址:</label>
<input class="easyui-validatebox" type="text" name="warehouseAddress0" >
<label>經營實體上年度銷售/營業收入:</label>
<input class="easyui-validatebox" type="text" name="salesIncome0" data-options="required:true,validType:'length[1,100]'">
<label>經營實體總負債:</label>
<input class="easyui-validatebox" type="text" name="totalLiability0" data-options="required:true,validType:'length[1,100]'">
</div>

<div class="fitem">
<label>銀行負債:</label>
<input class="easyui-validatebox" type="text" name="bankLiabilities0" data-options="required:true,validType:'length[1,100]'">
<label>上年度凈利潤:</label>
<input class="easyui-validatebox" type="text" name="netProfit0" data-options="required:true,validType:'length[1,100]'">

</div>
<br />
<div style="text-align:center;">
<a href="#" onclick="addRow()">添加一行</a>
</div>
</div>
</div>

javascript代碼：

//添加行
function addRow(){
rowCount++;
var newRow='<br/><div id="option'+rowCount+'"class="ui-edit" style="padding-top:5px"><div class="fitem">'+
'<label>經營網店名稱:</label><input class="easyui-validatebox" type="text" name="shopName'+rowCount+'">'+
'<label>所屬電商平臺名稱:</label><input class="easyui-validatebox" type="text" name="platformName'+rowCount+'"><label>網店級別（僅限淘寶及天貓商戶）:</label><input class="easyui-validatebox" type="text" name="shopLevel'+rowCount+'"><label>網店持續經營年限:</label><input class="easyui-validatebox" type="text" name="operatingPeriod'+rowCount+'"></div>'+
'<div class="fitem"><label>網店實際所有者（個人名稱或公司名稱):</label><input class="easyui-validatebox" type="text" name="shopOwner'+rowCount+'"><label>子帳號:</label> <input class="easyui-validatebox" type="text" name="subAccount'+rowCount+'"><label>密碼:</label> <input class="easyui-validatebox" type="text" name="sbuPassword'+rowCount+'"><label>主營業務及主要產品、品牌:</label><input class="easyui-validatebox" type="text" name="businessOpera'+rowCount+'"></div>'+
'<div class="fitem"><label>經營地址（如有）:</label><input class="easyui-validatebox" type="text" name="businessAddress'+rowCount+'" ><label>倉庫地址:</label><input class="easyui-validatebox" type="text" name="warehouseAddress'+rowCount+'" ><label>經營實體上年度銷售/營業收入:</label><input class="easyui-validatebox" type="text" name="salesIncome'+rowCount+'"><label>經營實體總負債:</label> <input class="easyui-validatebox" type="text" name="totalLiability'+rowCount+'"></div>'+
'<div class="fitem"><label>銀行負債:</label> <input class="easyui-validatebox" type="text" name="bankLiabilities'+rowCount+'" ><label>上年度凈利潤:</label><input class="easyui-validatebox" type="text" name="netProfit'+rowCount+'"></div>'+
'<br /><div style="text-align:center;"><a href="#" onclick=delRow('+rowCount+')>刪除</a></div></div>';

//var newRow='<tr id="option'+rowCount+'"><td class="oz-form-topLabel">選項'+rowCount+'：</td><td class="oz-property" ><input type="text" style="width:300px"></td><td><a href="#" onclick=delRow('+rowCount+')>刪除</a></td></tr>';

$('#optionContainer').append(newRow);
$('#rowCount').val(rowCount);
}
//刪除行
function delRow(rowIndex){
$("#option"+rowIndex).remove();
rowCount--;
$('#rowCount').val(rowCount);
}