1、fruit.js
//当页面加载完成后执行后面的匿名函数
window.onload = function () {//get:获取 Element:元素 By:通过...方式//getElementById()根据id值获取某元素let fruitTbl = document.getElementById("fruit_tbl");//table.rows:获取这个表格的所有的行，返回数组let rows = fruitTbl.rows;//从 1 开始，因为 第 0 行是表头，不需要绑定事件for (let i = 1; i < rows.length-1; i++) {let tr = rows[i];//事件动态绑定tr.onmouseover = showBGColor;tr.onmouseout = clearBGColor;//cell:单元格、细胞//获取这一行的所有的单元格let tds = tr.cells;let priceTD = tds[2];//绑定鼠标悬浮事件priceTD.onmouseover = showHand;//绑定点击事件priceTD.onclick=editPrice}zj();
};
editPrice = function () {let priceTD = event.srcElement;//inner:在...内部let oldPrice = priceTD.innerText;//innerHTML:在节点内部填充一段HTML代码//priceTD.innerHTML = "<input type='text' size='2' value='"+oldPrice+"'/>";priceTD.innerHTML = "<input type='text' size='2'/>";/*** <td><input type="text" size="2"/></td>* first:第一个 child:孩子* firstChild:第一个子节点* @type {ActiveX.IXMLDOMNode | ChildNode | (() => (Node | null))}*/let priceInput = priceTD.firstChild;priceInput.value = oldPrice;priceInput.select();//绑定失去焦点事件priceInput.onblur = updatePrice;
};
updatePrice = function () {let priceInput = event.srcElement;let newPrice = priceInput.value;let priceTD = priceInput.parentElement;priceTD.innerText = newPrice;xj(priceTD.parentElement)
};
xj = function (tr) {if (tr && tr.tagName == "TR") {let tds = tr.cells;let priceTD = tds[2];let fcountTD = tds[3];let xjTD = tds[4];let price = parseInt(priceTD.innerText);let fcount = parseInt(fcountTD.innerText);let xj = price*fcount;xjTD.innerText = xj;//同时更新总计zj();}
};
zj = function () {let fruitTbl = document.getElementById("fruit_tbl");let rows = fruitTbl.rows;let total = 0;for (let i = 1; i < rows.length - 1; i++) {let tr = rows[i];let xj = parseInt(tr.cells[4].innerText);total += xj;}rows[rows.length-1].cells[1].innerText = total;
};
function showHand() {let priceTD = event.srcElement;//cursor光标priceTD.style.cursor = "pointer";
}
function showBGColor() {//window.event表示当前发生的事件 ”window.“可以省略// console.log(window.event);// alert(window.event);let obj = window.event.srcElement;//alert(obj);//console.log(obj); //发现obj是td，而不是tr。事件传递现象let td=obj;//parentElement:父元素 td的父元素是tr。tr有很多td子元素let tr = td.parentElement;tr.style.backgroundColor = "purple";
}
function clearBGColor() {let td = window.event.srcElement;let tr = td.parentElement;tr.style.backgroundColor = "transparent";
}
2、fruit.html
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js-DOM/BOM实战</title><link href="style/fruit.css" rel="stylesheet"></link><script src="js/鼠标悬浮和离开事件.js"></script>
</head>
<body><div id="div0"><div id="div_title">欢迎使用水果库存系统</div><div id="div2"><table id="fruit_tbl"><tr><th class="w10"><input type="checkbox" /></th><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th class="w10">操作</th></tr><!-- on:当...时候 mouse:鼠标 over:在...上--><!--当鼠标悬浮在这个tr上时,调用showBGColor()这个方法--><tr><td><input type="checkbox" /></td><td>苹果</td><td>5</td><td>2</td><td>10</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>菠萝</td><td>3</td><td>5</td><td>15</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>哈密瓜</td><td>4</td><td>5</td><td>20</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>葡萄</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>青梅</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>人参果</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>菠萝蜜</td></td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>西红柿</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td colspan="2">总结:</td><td colspan="4">0</td></tr></table></div></div>
</body>
</html>
3、fruit.css
*{color:rgb(3, 31, 2);font-weight: lighter;
}
body{padding:0;margin:0;background-color: rgb(3, 31, 2);
}
#div0{width:80%;border:0px solid red;background-color: rgb(209, 230, 235);margin-left:10%;padding-top:48px;padding-bottom:48px;margin-top:8px;
}
#div_title{width:80%;margin-left:10%;text-align: center;font-size:24px;letter-spacing: 4px;margin-bottom:16px;
}
#div2{margin-left:10%;border:0px solid red;width:80%;
}
.delBtn{width:16px;height:16px;
}
#fruit_tbl , #fruit_tbl td, #fruit_tbl th {border:1px solid lightgray;text-align: center;
}
#fruit_tbl{width:100%;line-height: 32px;border-collapse: collapse;
}
.w10{width:10%;
}
.w15{width:15%;
}
.w20{width:20%;
}
