JS-项目实战-更新水果单价更新小计更新总计

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 = "";
    priceTD.innerHTML = "";
    /**
     * 
     * 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 

    
    
    
    
    
    


    

        
欢迎使用水果库存系统
        

            

                

                    

                    
名称
                    
单价
                    
数量
                    
小计
                    
操作
                
                
                
                

                    

                    
苹果
                    
5
                    
2
                    
10
                    

                
                

                    

                    
菠萝
                    
3
                    
5
                    
15
                    

                
                

                    

                    
哈密瓜
                    
4
                    
5
                    
20
                    

                
                

                    

                    
葡萄
                    
10
                    
5
                    
50
                    

                
                

                    

                    
青梅
                    
10
                    
5
                    
50
                    

                
                

                    

                    
人参果
                    
10
                    
5
                    
50
                    

                
                

                    

                    
菠萝蜜
                    
10
                    
5
                    
50
                    

                
                

                    

                    
西红柿
                    
10
                    
5
                    
50
                    

                
                

                    
总结:
                    
0
                
            
        
    

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