JS-项目实战-编辑单价单元格，可以点击单价单元格并且出现文本框，并自动选中输入框内部的文本

1、鼠标悬浮和离开事件.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; 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
    }
};
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();

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

                
            
        
    

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

在JS中，使用 event.srcElement 属性可以获取触发事件的元素（即事件的源）。这个属性对于在事件处理函数中对元素进行操作非常有用。例如，可以使用 event.srcElement 来修改元素的样式，添加或删除元素的类等等。

下面是一个使用 event.srcElement 的例子，当用户单击页面上的任意元素时，会在控制台中输出该元素的 id 属性：

document.addEventListener('click', function(event) {
  console.log(event.srcElement.id);
});

此外，在老版本的 Internet Explorer 中，event.srcElement 是获取事件目标元素（即触发事件的元素）的首选属性，因为 event.target 不被支持。但在现代浏览器中，建议使用 event.target 来获取目标元素。

event.srcElement 可以用在JS中来获取触发事件的元素。在早期的IE浏览器版本中，该属性被广泛使用来获取事件源元素。 在现代浏览器中，推荐使用 event.target 属性来代替 event.srcElement 属性，因为 event.srcElement 在所有主流浏览器中并不总是支持。

通过使用 event.srcElement，您可以轻松地确定哪个元素触发了某个事件，并进一步针对该元素执行相应的操作。例如，您可以通过 event.srcElement 修改某个元素的样式或属性，或者为触发该事件的元素添加其他事件监听器来实现更多的功能。

在 JavaScript 中，event.srcElement 属性通常用于以下目的：

1. 获取触发事件的元素：event.srcElement 可以返回触发事件的元素对象，也就是事件的目标元素。

2. 判断事件来自哪个元素：通过检查 event.srcElement 属性，可以判断事件来自哪个元素，进而根据需要进行相应的操作。

3. 兼容性考虑：event.srcElement 属性在早期的 IE 浏览器中得到了广泛支持，很多旧的网站和代码仍在使用该属性，如果需要兼容旧版 IE 浏览器，就需要使用 event.srcElement 属性。

需要注意的是，event.srcElement 属性已经被更加标准的 event.target 属性所取代，而且 event.target 属性在现代浏览器中得到了广泛支持，因此建议在编写新代码时使用 event.target 属性，而在兼容旧版 IE 浏览器时再考虑使用 event.srcElement 属性。