<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv = "content-type" content="text/html;charset=utf-8"/>
		<script src="js.js" type="text/javascript" language="javascript">	
		</script>
	</head>
	<body>
		<form action = "jsdemo.html" method="get">	
			<table id = "shopcar" border = 1>
				<tr>
					<td>商品名称</td>
					<td>商品单价</td>
					<td>商品数量</td>
					<td>商品价格</td>
				</tr>
				<tr>
					<td>a</td>
					<td>10</td>
					<td>
						<input type = "button" value = "-" onclick = "del(this);"/>
						<input type = "text" value = "1"/>
						<input type = "button" value = "+" onclick = "add(this);"/>
					</td>
					<td>10</td>
				</tr>
				<tr>
					<td>b</td>
					<td>20</td>
					<td>
						<input type = "button" value = "-" onclick = "del(this);"/>
						<input type = "text" value = "1"/>
						<input type = "button" value = "+" onclick = "add(this);"/>
					</td>
					<td>20</td>
				</tr>				
			</table><br>
			总价：<span id = "total">30</span>
		</form>
	</body>
</html>


//js.js

//function del(obj){	
//	var nodes = obj.parentNode.childNodes;///获得所有子节点  此方法不常用  应为得到了所有子节点，但是有可能不知道是后还有未知节点如 <tbody> 
//	 ///最好用obj.getElementsByTagName(可以确定位置，直接操作)
//	for(i = 0 ;i < nodes.length ; i ++){
//		//alert(i);   i 的值是3     最好不要用下标  当表结构改变时，需要改变
//		if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text" && nodes[i].value > 1){ 
//			///每个属性都有的属性 *.nodeName 获得到属性名（都是大写） 同时还要类型是text类型   买书的数量必须大于等于1
//			nodes[i].value = parseInt(nodes[i].value) - 1;///修改值   但是从界面获得的数据都是string类型  要进行转换
//		}
//	}
//	calTotal();
//}
function del(obj){
	var nodes = obj.parentNode.getElementsByTagName("INPUT");//得到obj的父节点  就是<tr> 使用obj.getElementByTagName(),得到所有的INPTUT元素
	//（INPUT元素的个数是知道的  就是自己写的）  然后就可以直接用下标访问了 
	if(nodes[1].value > 1){
		nodes[1].value = parseInt(nodes[1].value) - 1;
	}
	calTotal();//调用函数 因为每次修改都会修改该行的价格列 和总价
}
function add(obj){	
	var nodes = obj.parentNode.childNodes;
	for(i = 0 ;i < nodes.length ; i ++){
		if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){	
			//alert(i);   i 的值是3   
			nodes[i].value = parseInt(nodes[i].value) + 1;
		}
	}
	calTotal();
}
function calTotal(){
	var nodes = document.getElementById("shopcar").getElementsByTagName("tr");///取得所有行
	var sum = 0;
	var total = 0;
	for( i  = 1 ;i < nodes.length; i ++){
		var row = nodes[i];
      var price = parseFloat(row.getElementsByTagName("td")[1].innerHTML);
	 // alert(price);
	  var n = parseInt(row.getElementsByTagName("td")[2].getElementsByTagName("INPUT")[1].value);////直接在*.getElementsByTagName()后面写[] 表示这个数组的某个元素
	  // alert(n);
	  sum = n * price;
	  //alert(sum);
	  row.getElementsByTagName("td")[3].innerHTML = sum;
	  total = total + sum;
	  document.getElementById("total").innerHTML = total;
	}	 
	//alert(total);
}