• JS-项目实战-鼠标悬浮设置字体颜色以及控制键盘输入

    1、fruit.js

    1. //当页面加载完成后执行后面的匿名函数
    2. window.onload = function () {
    3.     //get:获取     Element:元素    By:通过...方式
    4.     //getElementById()根据id值获取某元素
    5.     let fruitTbl = document.getElementById("fruit_tbl");
    6.     //table.rows:获取这个表格的所有的行，返回数组
    7.     let rows = fruitTbl.rows;
    8.     //从 1 开始，因为 第 0 行是表头，不需要绑定事件
    9.     for (let i = 1; i < rows.length-1; i++) {
    10.         let tr = rows[i];
    11.         //事件动态绑定
    12.         tr.onmouseover = showBGColor;
    13.         tr.onmouseout = clearBGColor;
    14.  
    15.         //cell:单元格、细胞
    16.         //获取这一行的所有的单元格
    17.         let tds = tr.cells;
    18.         let priceTD = tds[2];
    19.         //绑定鼠标悬浮事件
    20.         priceTD.onmouseover = showHand;
    21.  
    22.         //绑定点击事件
    23.         priceTD.onclick=editPrice
    24.     }
    25.  
    26.     zj();
    27. };
    28. editPrice = function () {
    29.     let priceTD = event.srcElement;
    30.     //inner:在...内部
    31.  
    32.     let oldPrice = priceTD.innerText;
    33.  
    34.     //innerHTML:在节点内部填充一段HTML代码
    35.     //priceTD.innerHTML = "";
    36.     priceTD.innerHTML = "";
    37.     /**
    38.      * 
    39.      * first:第一个 child:孩子
    40.      * firstChild:第一个子节点
    41.      * @type {ActiveX.IXMLDOMNode | ChildNode | (() => (Node | null))}
    42.      */
    43.     let priceInput = priceTD.firstChild;
    44.     priceInput.value = oldPrice;
    45.  
    46.     priceInput.select();
    47.  
    48.     //绑定失去焦点事件
    49.     priceInput.onblur = updatePrice;
    50.  
    51.     //输入框绑定键盘摁下事件，用于判断摁下的值是否合法
    52.     priceInput.onkeydown = ckInput;
    53. };
    54. ckInput = function () {
    55.     // 0-9:48-57    backspace:8    enter:13
    56.     let kc = event.keyCode;
    57.     if (!((kc >= 48 && kc <= 57) || kc == 8 || kc == 13)) {
    58.         //取消事件
    59.         event.returnValue = false;
    60.     }
    61.     if (kc == 13) {
    62.         event.srcElement.blur();
    63.     }
    64. };
    65. updatePrice = function () {
    66.     let priceInput = event.srcElement;
    67.     let newPrice = priceInput.value;
    68.     let priceTD = priceInput.parentElement;
    69.     priceTD.innerText = newPrice;
    70.  
    71.     xj(priceTD.parentElement)
    72. };
    73. xj = function (tr) {
    74.     if (tr && tr.tagName == "TR") {
    75.         let tds = tr.cells;
    76.         let priceTD = tds[2];
    77.         let fcountTD = tds[3];
    78.         let xjTD = tds[4];
    79.  
    80.         let price = parseInt(priceTD.innerText);
    81.         let fcount = parseInt(fcountTD.innerText);
    82.         let xj = price*fcount;
    83.  
    84.         xjTD.innerText = xj;
    85.  
    86.         //同时更新总计
    87.         zj();
    88.     }
    89. };
    90. zj = function () {
    91.     let fruitTbl = document.getElementById("fruit_tbl");
    92.     let rows = fruitTbl.rows;
    93.     let total = 0;
    94.     for (let i = 1; i < rows.length - 1; i++) {
    95.         let tr = rows[i];
    96.         let xj = parseInt(tr.cells[4].innerText);
    97.         total += xj;
    98.     }
    99.     rows[rows.length-1].cells[1].innerText = total;
    100. };
    101. function showHand() {
    102.     let priceTD = event.srcElement;
    103.     //cursor光标
    104.     priceTD.style.cursor = "pointer";
    105. }
    106. function showBGColor() {
    107.     //window.event表示当前发生的事件 ”window.“可以省略
    108.     // console.log(window.event);
    109.     // alert(window.event);
    110.     let obj = window.event.srcElement;
    111.     //alert(obj);
    112.     //console.log(obj);   //发现obj是td，而不是tr。事件传递现象
    113.  
    114.     if (obj.tagName == "TD") {
    115.         let td=obj;
    116.         //parentElement:父元素   td的父元素是tr。tr有很多td子元素
    117.         let tr = td.parentElement;
    118.         tr.style.backgroundColor = "purple";
    119.  
    120.         //获取当前所有单元格，然后设置单元格中字体的颜色
    121.         let tds = tr.cells;
    122.         for (let i = 0; i length; i++) {
    123.             tds[i].style.color = "white";
    124.         }
    125.     }
    126.  
    127. }
    128. function clearBGColor() {
    129.     let td = window.event.srcElement;
    130.     if (td.tagName == "TD") {
    131.         let tr = td.parentElement;
    132.         tr.style.backgroundColor = "transparent";
    133.  
    134.         //获取当前行所有单元格，然后设置单元格中字体的颜色
    135.         let tds = tr.cells;
    136.         for (let i = 0; i < tds.length; i++) {
    137.             tds[i].style.color = "#031f02";
    138.         }
    139.     }
    140. }

    2、fruit.html

    1. html>
    2. <html lang="zh_CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>js-DOM/BOM实战title>
    8.     <link href="style/fruit.css" rel="stylesheet">link>
    9.     <script src="js/鼠标悬浮和离开事件.js">script>
    10. head>
    11. <body>
    12.     <div id="div0">
    13.         <div id="div_title">欢迎使用水果库存系统div>
    14.         <div id="div2">
    15.             <table id="fruit_tbl">
    16.                 <tr>
    17.                     <th class="w10"><input type="checkbox" />th>
    18.                     <th class="w20">名称th>
    19.                     <th class="w20">单价th>
    20.                     <th class="w20">数量th>
    21.                     <th class="w20">小计th>
    22.                     <th class="w10">操作th>
    23.                 tr>
    24.                 
    25.                 
    26.                 <tr>
    27.                     <td><input type="checkbox" />td>
    28.                     <td>苹果td>
    29.                     <td>5td>
    30.                     <td>2td>
    31.                     <td>10td>
    32.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    33.                 tr>
    34.                 <tr>
    35.                     <td><input type="checkbox" />td>
    36.                     <td>菠萝td>
    37.                     <td>3td>
    38.                     <td>5td>
    39.                     <td>15td>
    40.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    41.                 tr>
    42.                 <tr>
    43.                     <td><input type="checkbox" />td>
    44.                     <td>哈密瓜td>
    45.                     <td>4td>
    46.                     <td>5td>
    47.                     <td>20td>
    48.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    49.                 tr>
    50.                 <tr>
    51.                     <td><input type="checkbox" />td>
    52.                     <td>葡萄td>
    53.                     <td>10td>
    54.                     <td>5td>
    55.                     <td>50td>
    56.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    57.                 tr>
    58.                 <tr>
    59.                     <td><input type="checkbox" />td>
    60.                     <td>青梅td>
    61.                     <td>10td>
    62.                     <td>5td>
    63.                     <td>50td>
    64.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    65.                 tr>
    66.                 <tr>
    67.                     <td><input type="checkbox" />td>
    68.                     <td>人参果td>
    69.                     <td>10td>
    70.                     <td>5td>
    71.                     <td>50td>
    72.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    73.                 tr>
    74.                 <tr>
    75.                     <td><input type="checkbox" />td>
    76.                     <td>菠萝蜜td>td>
    77.                     <td>10td>
    78.                     <td>5td>
    79.                     <td>50td>
    80.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    81.                 tr>
    82.                 <tr>
    83.                     <td><input type="checkbox" />td>
    84.                     <td>西红柿td>
    85.                     <td>10td>
    86.                     <td>5td>
    87.                     <td>50td>
    88.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    89.                 tr>
    90.                 <tr>
    91.                     <td colspan="2">总结:td>
    92.                     <td colspan="4">0td>
    93.                 tr>
    94.             table>
    95.         div>
    96.     div>
    97. body>
    98. html>

    3、fruit.css

    1. *{
    2.     color:rgb(3, 31, 2);
    3.     font-weight: lighter;
    4. }
    5. body{
    6.     padding:0;
    7.     margin:0;
    8.     background-color: rgb(3, 31, 2);
    9. }
    10. #div0{
    11.     width:80%;
    12.     border:0px solid red;
    13.     background-color: rgb(209, 230, 235);
    14.     margin-left:10%;
    15.     padding-top:48px;
    16.     padding-bottom:48px;
    17.     margin-top:8px;
    18. }
    19. #div_title{
    20.     width:80%;
    21.     margin-left:10%;
    22.     text-align: center;
    23.     font-size:24px;
    24.     letter-spacing: 4px;
    25.     margin-bottom:16px;
    26. }
    27. #div2{
    28.     margin-left:10%;
    29.     border:0px solid red;
    30.     width:80%;
    31. }
    32. .delBtn{
    33.     width:16px;
    34.     height:16px;
    35. }
    36. #fruit_tbl , #fruit_tbl td, #fruit_tbl th {
    37.     border:1px solid lightgray;
    38.     text-align: center;
    39. }
    40. #fruit_tbl{
    41.     width:100%;
    42.     line-height: 32px;
    43.     border-collapse: collapse;
    44. }
    45. .w10{
    46.     width:10%;
    47. }
    48. .w15{
    49.     width:15%;
    50. }
    51. .w20{
    52.     width:20%;
    53. }

    变量kc存储的是键盘事件对象event的keyCode属性，即按下的键盘键的编码值。不同的按键有不同的编码值，下面是一些常见按键的编码值：

    • 退格键：8
    • Tab键：9
    • 回车键：13
    • Shift键：16
    • Ctrl键：17
    • Alt键：18
    • Caps Lock键：20
    • Esc键：27
    • 空格键：32
    • Page Up键：33
    • Page Down键：34
    • End键：35
    • Home键：36
    • 左箭头键：37
    • 上箭头键：38
    • 右箭头键：39
    • 下箭头键：40
    • Delete键：46
    • 0键：48
    • 1键：49
    • ...以此类推，一直到9键：57
    • A键：65
    • B键：66
    • ...以此类推，一直到Z键：90
  • 相关阅读:
    vue3 响应式对象的 api ，你全用过了吗？
    Linux 离线安装mysql
    权限模型 DAC ACL RBAC ABAC
    Java也能做OCR！SpringBoot 整合 Tess4J 实现图片文字识别
    Leaflet 加载高德地图
    substrate轻松学3：substrate构建一条链的体验
    Java 命令行工具
    【计组】存储器
    关于#svn#的问题：如何导出svn里面所有文件目录存入excel中比如 项目管理/启动阶段/项目调研/调研记录/20230701调研记录.xsl按层级导出目录结构
    12. 机器学习 - 拟合
  • 原文地址：https://blog.csdn.net/m0_65152767/article/details/134435759