JavaScript例子——计算

customer.js:

/**
 * @author fuhao
 * @param {Object} tbodyid
 * 首先在Html页面上定义一个标准的table模板
 * table的子节点是tbody
 * tbody的子节点是tr
 * tr的子节点是td
 * td的子节点是checkbox和input
 */
// 以table模板为标准，添加新的行的方法
function add(tbodyid){
	if(tbodyid==null){
		alert("该方法需要的参数不正确");
		return ;
	}
	// 得到tbody,也可以使用prototype.js里面的$(tbodyid)
	var tbody = document.getElementById(tbodyid);
	// var tbody = $(tbodyid);
	// 获得tbody下的索引为1的tr
	var trtemplate = tbody.childNodes[1];
	// 得到tr下的td数组
	var tds = trtemplate.childNodes;
	// 得到该tr下所有td数组的长度
	var trlength = tds.length;
	var tr = document.createElement("tr");
	for(var i=0;i<trlength;i++){
		var td = document.createElement("td");
		// 设置td的式样标记
		td.className = tds[i].className;
		var content = tds[i].innerHTML;
		td.innerHTML = content;
		tr.appendChild(td);	
	}
	tbody.appendChild(tr);
}

// 删除选中行的方法
function del(name){
	if(name==null){
		alert("该方法需要的参数不正确");
		return ;
	}
	// 获得数组
	var names = document.getElementsByName(name);
	// 获得数组的长度
	var length = names.length;
	if(length==1){
		alert("请至少保留一条记录");
		return ;
	}
	// 定义一个数组
	var arr = new Array();
	try{
		for(var i=0;i<length;i++){
			if(names[i].checked==true){
				// 将checkbox的父节点(td)的父节点(tr)放入数组里面
				arr.push(names[i].parentNode.parentNode);
			}
		}
	}catch(e){
		alert("捕获到的异常是:"+e);
	}
	if(arr.length==0){
		alert("请至少选择一条删除");
		return ;
	}
	var delsure = confirm("确认要删除所选记录吗?");
	if(!delsure){
		return ;
	}
	for(var j=0;j<arr.length;j++){
		if(arr.length == length){
			alert("请至少保留一条记录");
			return ;
		}
		Element.remove(arr[j]);
	}
}
// 敲回车，则添加新的一行
function addItem(tbodyid){
	// 13代表回车
	if(event.keyCode==13){
		add(tbodyid);
	}
}
// 全部选择
function checkAll(name){
	// 首先获得所有checkbox集合
	var names = document.getElementsByName(name);
	for(var i=0;i<names.length;i++){
		names[i].checked=true;
	}
}
// 取消选择--反选
function cancelCheck(name){
	var names = document.getElementsByName(name);
	var length = names.length;
	for(var i=0;i<length;i++){
		if(names[i].checked){
			names[i].checked = false;
		}else{
			names[i].checked = true;
		}
	}
}

//用于自动补0的方法 如:5--5.00,5.5--5.50
function mend(number){
	var str = number+"";
	if (str.indexOf(".")==-1){ //说明没有小数点
		return str+".00";
	}else{ //说明有小数点
		var tmp = str.substring(str.indexOf(".")+1);
	    if (tmp.length==0) return str+"00";
		if (tmp.length==1) return str+"0";
		if (tmp.length>=2) return str.substring(0,str.indexOf(".")+3);
	}
}

//用于四舍五入的方法
function ForDight(Dight,How) {  
   Dight = Math.round(Dight*Math.pow(10,How))/Math.pow(10,How);  
   return  mend(Dight);  
} 

// 计算(这里以数量作为参照物)
function calc(obj){
	// obj.parentElement获取对象层次中的父对象
	var td = obj.parentElement;
	var tr = td.parentElement;
	var numbers = tr.childNodes[4].childNodes[0].value;       // 数量
	//alert("numbers:"+numbers);
	var faceValue = tr.childNodes[2].childNodes[0].value;     //面值
	//alert("faceValue:"+faceValue);
	var additionValue = tr.childNodes[3].childNodes[0].value; //附赠
	//alert("additionValue:"+additionValue);
	//判断为空或者不为数字
	if(numbers=="" || faceValue=="" || additionValue=="" || isNaN(numbers) || isNaN(faceValue) || isNaN(additionValue)){
		// alert("--你的输入有误，数量为非空正整数,面值和附赠应为非空正数--");
		tr.childNodes[5].childNodes[0].value = "";
		tr.childNodes[6].childNodes[0].value = "";
		tr.childNodes[7].childNodes[0].value = "";
		return ;
	}
	//判断是否小于零或者数量为整数
	if(numbers<=0*1 || faceValue<=0*1 || additionValue<=0*1 || numbers.indexOf(".")!=-1){
		// alert("--你的输入有误，数量为非空正整数,面值和附赠应为非空正数--");
		tr.childNodes[5].childNodes[0].value = "";
		tr.childNodes[6].childNodes[0].value = "";
		tr.childNodes[7].childNodes[0].value = "";
		return ;
	} 
	var faceValues = numbers*faceValue;    //面值金额
	var additionValues = numbers*additionValue;//附赠金额
	var faceValueAll = faceValues+additionValues;  //面值总额
	// 赋值	
	tr.childNodes[5].childNodes[0].value = ForDight(faceValues,2);
	tr.childNodes[6].childNodes[0].value = ForDight(additionValues,2);
	tr.childNodes[7].childNodes[0].value = ForDight(faceValueAll,2);
}

function calcs(obj){
	// obj.parentElement获取对象层次中的父对象
	var td = obj.parentElement;
	var tr = td.parentElement;
	var numbers = tr.childNodes[4].childNodes[0].value;       // 数量
	var price = tr.childNodes[8].childNodes[0].value;		  //单价
	var agio = tr.childNodes[9].childNodes[0].value;		  //折扣
	if(numbers=="" || price=="" || isNaN(numbers) || isNaN(price) || isNaN(agio)){
		alert("--------");
		tr.childNodes[10].childNodes[0].value = "";
		return ;
	}
	if(numbers<=0*1 || numbers.indexOf(".")!=-1 || price<=0*1 || agio<=0*1 || agio>10){
		alert("++++++++");
		tr.childNodes[10].childNodes[0].value = "";
		return ;
	}
	var factValues ;
	if(agio==""){//说明没有填写折扣 
	alert("--说明没有填写折扣--");
		factValues = price*numbers;
		alert("factValue1:"+factValues);
	}else{
	alert("--说明填写折扣了--");
		factValues = price*numbers*agio;
		alert("factValue2:"+factValues);
	}
	alert("factValue3:"+factValues);
	tr.childNodes[10].childNodes[0].value = ForDight(factValues,2);
}

calc.htm:

引用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript例子</title>
<script src="js/customer.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="#" onclick="add('DispatchItemTable')">增加</a>&nbsp;&nbsp;
<a href="#" onclick="del('checkName')">删除</a>&nbsp;&nbsp;
<a href="#" onclick="checkAll('checkName')">全选</a>&nbsp;&nbsp;
<a href="#" onclick="cancelCheck('checkName')">反选</a>&nbsp;&nbsp;面值金额=面值*数量&nbsp;&nbsp;附赠金额=附赠*数量&nbsp&nbsp;
面值总额=面值金额+附赠金额&nbsp;&nbsp;实收金额=单价*数量*折扣
</p>
<table id="table" align='center' border='1' bordercolor='#0690AE' cellpadding='0' cellspacing='0' style='border-collapse:collapse;'  width='100%'>
  <tbody id="DispatchItemTable">
  <tr>
    <td nowrap class='data_list_th'>序号</td>
    <td class='data_list_th'>卡名称</td>
    <td class='data_list_th'><font color="red">*</font>面值(元)</td>
    <td class='data_list_th'><font color="red">*</font>附赠(元)</td>
    <td class='data_list_th'><font color="red">*</font>数量(枚)</td>
    <td class='data_list_th'>面值金额(元)</td>
    <td class='data_list_th'>附赠金额(元)</td>
<td class='data_list_th'>面值总额(元)</td>
<td class='data_list_th'><font color="red">*</font>单价(元)</td>
<td class='data_list_th'><font color="red">*</font>折扣</td>
<td class='data_list_th'>实收金额(元)</td>
  </tr>
  <tr id="testc">
    <td class='data_list_td'><input type="checkbox" name="checkName" /></td>
    <td class='data_list_td'><input name="cardName" type="text" size="12" value="IC卡" readonly="true" onkeydown="addItem('DispatchItemTable')" /></td>
    <td class='data_list_td'><input name="faceValue" type="text" size="12"  onchange="calc(this);calcs(this)" /></td>
    <td class='data_list_td'><input name="additionValue" type="text" size="12"  onchange="calc(this)" /></td>
    <td class='data_list_td'><input name="cardNumber" type="text" size="12"  onchange="calc(this)" /></td>
    <td class='data_list_td'><input type="text" name="faceValues" size="12" readonly="true" /></td>
    <td class='data_list_td'><input type="text" name="additionValues" size="12" readonly="true" /></td>
<td class='data_list_td'><input type="text" name="faceValuesAll" size="12" readonly="true" /></td>
<td class='data_list_td'><input type="text" name="price" size="12" onchange="calcs(this)" /></td>
<td class='data_list_td'><input type="text" name="agios" size="12" onchange="calcs(this)" /></td>
<td class='data_list_td'><input type="text" name="factValue" size="12" readonly="true" /></td>
  </tr>
</tbody>
</table>
<p>&nbsp;</p>
</body>
</html>