HTML + CSS + Javascript 简易示例

要实现的效果：

1. 页面中有一个表格显示水果的数据。
2. 鼠标移动到表格内，就改变当前行背景色，移动到单价单元格鼠标就变成手型。
3. 单价单元格点击进行编辑，对输入进行容错处理，编辑后计算更新小计和总计。
4. 点击删除操作弹出提示框提醒，确认删除即删除表格一行数据，并更新总计。

效果图：

html文件：demo03.html

	
	



	

		

			

				

					
名称
					
单价
					
数量
					
小计
					
操作
				
				

					
苹果
					
5
					
21
					
105
					



				
				

					
西瓜
					
7
					
1
					
7
					



				
				

					
菠萝
					
18
					
3
					
54
					



				
				

					
香蕉
					
3
					
10
					
30
					



				
				

					
总计
					
196
				

			
		
	

css文件：html03.css

body{
	margin: 0;
	padding: 0;
	background-color: lightgrey;
}
div{
	position: relative;
	float: left;
}
input{
	font-size: 22px;
}

#div_container{
	width: 80%;
	height: 100%;
	border: 1px solid grey;
	margin-left: 10%;
	float: left;
	background-color: honeydew;
	border-radius: 4px;
}

#div_fruit_list{
	width: 100%;
}

#tal_fruit {
	width: 60%;
	margin-left: 20%;
	margin-top: 100px;
	line-height: 40px;
}

#tal_fruit , #tal_fruit tr , #tal_fruit th , #tal_fruit td {
	border: 2px solid grey;
	border-collapse: collapse;
	text-align: center;
	font-family: "黑体";
	color: threeddarkshadow;
	font-size: 22px;
}

.w20{
	width: 20%;
}

.img_delete{
	width: 24px;
	height: 24px;
}

js文件：demo03.js

window.onload = function() {
	//当页面加载完成，我们需要绑定各种事件

	var fruitTbl = document.getElementById("tal_fruit");
	//获取表格中的所有行
	var rows = fruitTbl.rows;
	for (var i = 1; i < rows.length - 1; i++) {
		var ti = rows[i];
		//1.绑定鼠标悬浮以及离开时设置背景颜色事件
		//方法不加小括号，表示方法绑定到这个事件
		ti.onmouseover=showBgColor;
		ti.onmouseout = clearBgColor;

		//获取tr这一行的所有单元格
		var cells = ti.cells;
		var priceTd = cells[1];

		//2.绑定鼠标悬浮在单价单元格变手势的事件
		priceTd.onmouseover = showHand;
		//3.绑定鼠标点击单价单元格的事件
		priceTd.onclick = editPrice;

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

	}
}

//当鼠标悬浮时，显示背景颜色
function showBgColor(){
	// event : 当前发生的事件
	// event.srcElement : 事件源
	
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;

		// td.parentElement 表示获取td的父元素 -> TR
		var tr = td.parentElement;

		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor = "royalblue";

		//
		var tds = tr.cells;
		for (var i = 0; i < tds.length; i++) {
			tds[i].style.color = "white";
		}

	}
}

//当鼠标离开时，恢复原始样式
function clearBgColor(){
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;

		var tr = td.parentElement;

		tr.style.backgroundColor = "transparent";

		var tds = tr.cells;
		for (var i = 0; i < tds.length; i++) {
			tds[i].style.color = "threeddarkshadow";
		}
	}
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand() {
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;
		// cursor : 光标
		td.style.cursor="hand"
	}
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice() {
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		
		var priceTd = event.srcElement;
		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点，TextNode对应的是3  ElementNote对应的是1
		if(priceTd.firstChild && priceTd.firstChild.nodeType == 3) {
			
			//innerText 表示设置或者获取当前节点的内部文本
			var oldPrice = priceTd.innerText;
			//innerHtml 表示设置当前节点的内部HTML
			priceTd.innerHTML="";
			// 
			var input = priceTd.firstChild;
			if (input.tagName == "INPUT"){
				input.value = oldPrice;
				//选中输入框内部的文本
				input.select();
				//4.绑定输入框失去焦点，失去焦点，更新单价
				input.onblur=updatePrice;

				//8.在输入框上绑定键盘按下的事件，此处我需要保证用户输入的是数字
				input.onkeydown=checkInput;
			}
		}
	}
}

//更新单价
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.innerHTML = newPrice;

		//5.更新当前行的小计这一个格子的值
		//priceTd.parentElement td的父元素是tr
		updateXj(priceTd.parentElement);
	}
}

//更新指定行的小计
function updateXj(tr) {
	if (tr && tr.tagName == "TR") {
		var tds = tr.cells;
		var price = tds[1].innerText;
		var count = tds[2].innerText;
		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
		var xj = parseInt(price) * parseInt(count);
		tds[3].innerText = xj;

		//6.更新总计
		updateZj();
	}
}

//更新总计
function updateZj() {
	var fruitTbl = document.getElementById("tal_fruit");
	var rows = fruitTbl.rows;
	var sum = 0;
	for (var i = 1; i < rows.length - 1; i++) {
		var tr = rows[i];
		var xj = parseInt(tr.cells[3].innerText);
		sum = sum + xj;
	}
	rows[rows.length - 1].cells[1].innerText = sum;
}

//删除指定行
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;
			var fruitTbl = document.getElementById("tal_fruit");
			fruitTbl.deleteRow(tr.rowIndex);

			updateZj();
		}
	}
}

//检验键盘摁下的值的方法
function checkInput() {
	var kc = event.keyCode;
	// 0~9 : 48~57
	//backspace : 8
	//enter : 13
	console.log(kc);

	if ( !((kc >= 48 && kc<=57) || kc == 8 || kc == 13) ) {
		event.returnValue = false;
	}

	if (kc == 13) {
		event.srcElement.blur();
	}
}

鼠标放在单元格时改变当前行的背景色，放在单价单元格上鼠标变成手型

点击单价单元格进行编辑

改变单价后计算小计和总计并更新

点击删除操作弹出提示框

删除一行数据后更新总计数据