jquery动态添加行并计算总金额

物流信息系统中的外购单据功能需求:

如附件中的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);//将总费用显示到对应的文本框对象中
}

 

评论

1 楼 skylcf 2012-09-29  

整个页面的代码呢？