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

1、鼠标悬浮和离开事件.js

javascript 复制代码
//当页面加载完成后执行后面的匿名函数
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 = "<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();

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

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>
            </table>
        </div>
    </div>
</body>
</html>

3、fruit.css

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 属性:

javascript 复制代码
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 属性。

相关推荐
你挚爱的强哥32 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒4 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪4 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背5 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M5 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc5 小时前
学习electron
javascript·学习·electron
想自律的露西西★5 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5