资料来源于：B站尚硅谷JavaWeb教程(全新技术栈,全程实战) ，本人才疏学浅，记录笔记以供日后回顾
视频链接
个人总结知识点
1.相较于上一节，新增 当鼠标悬浮在单价上后，点击单价列中数字，可以修改单价，并且随着单价的修改，小计和总计也随之变动。
2.onclick 点击事件
3.onblur 失去焦点事件
4.具体使用说明可见下文js的代码示例中注释
html示例代码
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo05.css">
<script type="text/javascript" src="js/demo08.js"></script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
js示例代码
window.onload=function(){
updateZJ();
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = document.getElementById("tbl_fruit");
//获取表格中的所有的行
var rows = fruitTbl.rows ;
for(var i = 1 ; i<rows.length-1 ; i++){
var tr = rows[i];
//1.绑定鼠标悬浮以及离开时设置背景颜色事件
tr.onmouseover=showBGColor;
tr.onmouseout=clearBGColor;
//获取tr这一行的所有单元格
var cells = tr.cells;
var priceTD = cells[1];
//2.绑定鼠标悬浮在单价单元格变手势的事件
priceTD.onmouseover = showHand ;
//3.绑定鼠标点击单价单元格的事件
priceTD.onclick=editPrice;
}
}
//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var priceTD = event.srcElement ;
//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3 ElementNode对应的是1
if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
//innerText 表示设置或者获取当前节点的内部文本
var oldPrice = priceTD.innerText ;
//innerHTML 表示设置当前节点的内部HTML
//下面这行代码，表示将一个文本框赋值给这个当前节点的内部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
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 ;
//更新总计
updateZJ();
}
}
//更新总计
function updateZJ(){
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 xj = parseInt(tr.cells[3].innerText); //NaN not a number 不是一个数字
sum = sum + xj ;
}
//将sum赋给最后一行的第2个格子中
rows[rows.length-1].cells[1].innerText = sum ;
}
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
//event : 当前发生的事件
//event.srcElement : 事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName); --> TD
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 = "navy" ;
//tr.cells表示获取这个tr中的所有的单元格
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";
}
}