JS代码实现：修改价格表中单价，自动修改小计和总计

对上表中的单价进行修改，从而自动修改小计和总计

【demo08.js】

window.onload=function(){
	updateAllSum();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl = document.getElementById("tbl_fruit");
	//获取表格中所有行(tr)
	var rows = fruitTbl.rows;
	//去掉表头和总计那两行
	for(var i = 1; i < rows.length-1; i++) {
		var tr = rows[i];
		//获取tr这一行所有的单元格
		var cells = tr.cells;
		//获取单价单元格
		var priceTD = cells[1];
		//3.绑定鼠标点击单价单元格的事件
		priceTD.onclick = editPrice;
	}
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		var priceTD = event.srcElement;
		//判断当前priceTD有子节点，而且第一个子节点是文本节点
        //TextNode对应的节点类型为3， Element对应的节点类型为1
		//确保每次点击文本框，都显示原来的值
		if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
			//innerText:表示设置或者获取当前节点的内部文本  为字符串
		    var oldPrice = priceTD.innerText;
		    //innerHTML:表示设置当前节点的内部HTML
		    priceTD.innerHTML="<input type='text' size='4' />";
		    //<td><input type='text' size='4'/></td>
		    var input = priceTD.firstChild;
		    if(input.tagName == "INPUT"){
				//文本框中显示原来的值
			    input.value = oldPrice;
				//选中输入框内部的文本
				input.select();

				//4.绑定输入框失去焦点事件，失去焦点，更新单价
				input.onblur = updatePrice;

		    }
		}		
	}
}

//修改价格
function updatePrice() {
	if(event && event.srcElement && event.srcElement.tagName == "INPUT") {
		var input = event.srcElement;
		var newPrice = input.value;

		//input节点的父节点是td
		var priceTD = input.parentElement;
		priceTD.innerText = newPrice;

		//更新当前行的小计这一格的值
		//priceTD.parentElement td的父元素是tr
		updateRowSum(priceTD.parentElement);
	}
}

//更新指定行的小计
function updateRowSum(tr){
	if(tr && tr.tagName == "TR") {
		//获取所有单元格
		var tds = tr.cells;
		//获取当前行的单价
		var price = tds[1].innerText;
		//获取当前行的数量
		var count = tds[2].innerText;
		//innerText获取到的值的类型为字符串类型，因此需要类型转换，才能进行数学运算
		var rowSum = parseInt(price) * parseInt(count);
		tds[3].innerText = rowSum;

		//更新总计
		updateAllSum();
	}
}

//更新总计
function updateAllSum(){
	//根据id获取到表格
	var fruitTbl = document.getElementById("tbl_fruit");
	var rows = fruitTbl.rows;
	var sum = 0;
	for(var i = 1; i < rows.length-1; i++){
		var tr = rows[i];
		var rowSum = parseInt(tr.cells[3].innerText);//NaN: not a number 不是一个数字
		sum = sum + rowSum; 
	}
	rows[rows.length-1].cells[1].innerText = sum;
}