应用jquery批量新增（一、页面新增多行）

我最近做了批量新增这个功能，期间多次上网，寻找多个知识点的资料，在功能完成后，写下这篇完整的关于批量新增的文章，希望能帮到想实现这个功能的人，同时，鄙人才疏学浅，功能上都不完善的地方，还望各位大牛多多指教。

本篇介绍用jquery实现点击“新增”按钮，页面实现表格新增一行的功能。

因为要考虑到后台接收时，不同行的区别问题，要声明一个临时变量index，第一行index为0，每增加一行，index++

Jsp页面：

Javascript部分：

<script language="javascript" type="text/javascript"

src="datepicker/WdatePicker.js"></script>//加入datepicker日期控件包

<script src="js/jquery.min.js"></script>//在开头加入jquery包

<script>

var index=0;

$(document).ready(function(){

　　$("#addMore").click(function(){

　　　　index++;

　　　　var peoEquipname="<td><input type='text' name='peoEquipname' id='peoEquipname"+index+"' ></td>";//peoEquipname为产品名称

　　　　var peoBrand="<td><input type='text' name='peoBrand' id='peoBrand"+index+"' ></td>";//peoBrand为品牌

　　　　var peoModel="<td><input type='text' name='peoModel' id='peoModel"+index+"' ></td>";//peoModel为产品型号

　　　　var peoDelidate="<td><input type='text' class='Wdate' name='peoDelidate' onclick='WdatePicker()' ></td>";//peoDelidate'为交货日期，使用datepicker日期控件，方便日期输入，防止错误日期输入，class='Wdate' 让输入框上出现日期标识，onclick='WdatePicker()'点击出现日期插件。

　　　　var peoNum="<td><input type='text' name='peoNum' value='' onkeyup='javaScript:removeSpace(this);' maxlength='8'></td>";//peoNum'为数量，removeSpace()去除非数字的输入

　　　　var peoInqucost="<td><input type='text' name='peoInqucost' value='<fmt:formatNumber value='' pattern='0.00'/>' onblur='javaScript:checkIsMoney(this.value,a"+index+"text);' maxlength='11' ><span id='a"+index+"text' ></span></td>";//peoInqucost'为金额，checkIsMoney()检查金额输入的合法性

　　　　var line=peoEquipname+peoBrand+peoModel+peoDelidate+peoNum+peoInqucost;//

　　　　$("#expall").append("<tr>");

　　　　$("#expall").append(line);

　　　　$("#expall").append("</tr>");

　　});

});

</script>

<script type="text/javascript">

function removeSpace(peoNum){

　　return peoNum.value=peoNum.value.replace(/\D/gi,"");

}

//判断金额格式

function isMoney(str){ 

　　var reg =/^(-?(([1-9]\d*)|0)(\.\d{1,2})?)$/;

　　if (reg.test(str)){

　　　　return true;

　　}else{

　　　　return false;

　　}

}

//给出提示

function checkIsMoney(checkValue,divName){

　　var tempCheck=checkValue;

　　if(tempCheck!=null && tempCheck!=""){

　　　　if(!isMoney(tempCheck)){

　　　　　　divName.innerHTML='金额格式不正确'; 

       　　 return false;

    　　}

    　　if(divName!=''){

    　　　　divName.innerHTML='';

　　　　　　divName.visible='false';

   　　 }

　　}else{

　　　　tempCheck="0";

　　}

}

</script>

部分静态代码

<button type="button"  id="addMore" >增加 </button>

<table >

　　<thead>

　　　　<tr>

　　　　　　<th width="30%">产品名称</th>

　　　　　　<th width="15%">品牌</th>

　　　　　　<th width="20%">规格型号</th>

　　　　　　<th width="15%">交货日期</th>

　　　　　　<th width="10%">数量</th>

　　　　　　<th width="10%">询价成本</th>

　　　　</tr>

　　</thead>

　　<tbody id="expall">

　　<tr>

　　　　<td>

　　　　　　<input type='text' name='peoEquipname' id='peoEquipname0' >

　　　　</td>

　　　　<td>

　　　　　　<input type='text' name='peoBrand' id='peoBrand0' >

　　　　</td>

　　　　<td>

　　　　　　<input type='text' name='peoModel' id='peoModel0' >

　　　　</td>

　　　　<td>

　　　　　　<input type="text" class="Wdate" name="peoDelidate" value="" onclick="WdatePicker()" >

　　　　</td>

　　　　<td>

　　　　<input type="text" name="peoNum" value="" onkeyup='javaScript:removeSpace(this);' maxlength="8">

　　　　</td>

　　　　<td>

　　　　　　<input type="text" name="peoInqucost" 

　　　　　　　　value='<fmt:formatNumber value="" pattern="0.00"/>' 

　　　　　　　　onblur="javaScript:checkIsMoney(this.value,a0text);" 

　　　　　　　　maxlength="11" >

　　　　　　<span id="a0text" ></span>

　　　　</td>

　　　</tr>

　　　</tbody>

</table>