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;

		//7.绑定删除小图标的点击事件
		var img = cells[4].firstChild;
		if(img && img.tagName == "IMG"){
			
			//绑定单击事件
			img.onclick = deleteFruit;
		}
	}
}

function deleteFruit(){
	if(event && event.srcElement && event.srcElement.tagName == "IMG"){
		
		//alert表示弹出一个对话框，只有确定按钮
		//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true；否则返回false
		if(window.confirm("是否确认删除当前库存记录")) {
			var img = event.srcElement;
			var tr = img.parentElement.parentElement;
		    //根据id获取到表格
	        var fruitTbl = document.getElementById("tbl_fruit");
		    fruitTbl.deleteRow(tr.rowIndex);

			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;
}