要实现的效果:
- 页面中有一个表格显示水果的数据。
- 鼠标移动到表格内,就改变当前行背景色,移动到单价单元格鼠标就变成手型。
- 单价单元格点击进行编辑,对输入进行容错处理,编辑后计算更新小计和总计。
- 点击删除操作弹出提示框提醒,确认删除即删除表格一行数据,并更新总计。
效果图:
HTML
html文件:demo03.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/demo03.css">
<script type="text/javascript" src="js/demo03.js"></script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tal_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th class="w20">操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>21</td>
<td>105</td>
<td><img src="imgs/delete.png" class="img_delete"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td><img src="imgs/delete.png" class="img_delete"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>18</td>
<td>3</td>
<td>54</td>
<td><img src="imgs/delete.png" class="img_delete"/></td>
</tr>
<tr>
<td>香蕉</td>
<td>3</td>
<td>10</td>
<td>30</td>
<td><img src="imgs/delete.png" class="img_delete"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">196</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS
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;
}
Javascript
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="<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;
//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();
}
}
显示效果
鼠标放在单元格时改变当前行的背景色,放在单价单元格上鼠标变成手型
点击单价单元格进行编辑
改变单价后计算小计和总计并更新
点击删除操作弹出提示框
删除一行数据后更新总计数据