物流信息系统中的外购单据功能需求:
如附件中的bill_add.bmp所示(本来要上传图片的,但没找到如何上传本地图片在文章中,所以就上传的是附近),表格中每一行代表一笔进购材料的信息,在录入每行的实收数量和单价,要求能算出这样材料的金额,并且能自动统计所有进购材料的总金额。进购材料信息的数据量(即表格的行数)不定,要求能动态增加(每次递增6行),即表格的数据行数是动态可维护的。
1、实现动态添加行
在此我用的的jquery的before()在所有段落之前插入一些HTML标记代码
在合计的行之前插入行的
function addRow() { var tabObj = $("#tableInfo"); var len = $('#tableInfo tr').length; var j = len - 2; for(var i = 1;i<=6;i++){ param = parseInt(i+j); var model = '<tr>' + '<td><input type="text" id="qmateCode_' + parseInt(i+j) + '" name="mateCode" autocomplete="off" style="height:18px;"/></td>' + '<td><input type="text" name="mateNames" id="mateName'+param+'" size="30"/></td>' + '<td><input type="text" name="mateSpec" id="mateSpec'+param+'" size="15"/></td>' + '<td><input type="text" name="mateUnit" id="mateUnit'+param+'" size="5"/></td>' + '<td><input type="text" name="mateNum" id="mateNum'+param+'" size="5" /></td>' + '<td><input type="text" name="matePrice" id="price'+param+'" size="5" /></td>' + '<td><input type="text" name="mateAmount" size="5" id="iodeSum'+param+'" /></td>' + '<td><input type="text" name="remark" id="remark'+param+'" size="20"/></td>' + '</tr>'; $('#heji').before(model); } } //验证单价 function checkPrice(price,objId,mateNum,mateAmount){ var id = objId.split('_')[1]; price.value = price.value.replace(/[^\d.]/g,'');//把非数字的都替换掉,除了数字和点(.) price.value = price.value.replace(/^\./g,''); //保证第一个必须是数字,而不能是点(.) price.value = price.value.replace(/\.{2,}/g,'.'); //保证不能存在多个.连续,只能一个 price.value = price.value.replace('.','#').replace(/\./g,'').replace('#','.'); //保证.只出现一次, //不能出现两次以上 if(price.value == ''){ price.value = 0; } var mateNum = $('#'+mateNum+id); var mateAmount = $('#'+mateAmount+id); if(mateNum.val() !=''){ mateAmount.attr('value',parseFloat(parseFloat(price.value)*mateNum.val())); } updateTotal(); //计算总金额 } /**检查数量*/ function checkNum(num,objId,matePrice,mateAmount){ var id = objId.split('_')[1]; num.value = num.value.replace(/[^\d.]/g,'');//把非数字的都替换掉,除了数字和点(.) num.value = num.value.replace(/^\./g,''); //保证第一个必须是数字,而不能是点(.) num.value = num.value.replace(/\.{2,}/g,'.'); //保证不能存在多个.连续,只能一个 num.value = num.value.replace('.','#').replace(/\./g,'').replace('#','.'); //保证.只出现一次, //不能出现两次以上 if(num.value == '' || num.value == 0){ num.value = 1; } var mateprice = $('#'+matePrice+id); var mateAmount = $('#'+mateAmount+id); if(mateprice.val() !=''){ mateAmount.attr('value',parseFloat(num.value*mateprice.val())); updateTotal();//计算总金额 } } //统计更新总金额 function updateTotal(){ var totalMoney = 0 ;//总金额的初始值为0 var table = $('#tableInfo'); //得到表格的jquery对象 var total = table.find('#sum'); //得到总金额的对象 var txtAfters = [];//每一行金额 的数组对象 if(param != 0){ for(var i = 1;i<= param ;i++){ txtAfters.push(table.find('#iodeSum'+i));//得到所有计算好的金额对象 } } $.each(txtAfters,function(j){ var tempValue = $(this).val(); if(tempValue == ""){ tempValue = 0; } totalMoney = totalMoney+parseFloat(tempValue); //计算总费用 }); total.val(totalMoney);//将总费用显示到对应的文本框对象中 }