• JS-新增水果库存记录表单页面实现

    1、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" id="ckAll"/>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"><input type="button" value="批量删除" id="delsBtn"/>th>
    23.             tr>
    24.             
    25.             
    26.             <tr>
    27.                 <td><input type="checkbox" name="ck"/>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" name="ck"/>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" name="ck"/>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" name="ck"/>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" name="ck"/>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" name="ck"/>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" name="ck"/>td>
    76.                 <td>菠萝蜜td>
    77.                 td>
    78.                 <td>10td>
    79.                 <td>5td>
    80.                 <td>50td>
    81.                 <td><img src='imgs/del.png' class="delBtn"/>td>
    82.             tr>
    83.             <tr>
    84.                 <td><input type="checkbox" name="ck"/>td>
    85.                 <td>西红柿td>
    86.                 <td>10td>
    87.                 <td>5td>
    88.                 <td>50td>
    89.                 <td><img src='imgs/del.png' class="delBtn"/>td>
    90.             tr>
    91.             <tr>
    92.                 <td colspan="2">总结:td>
    93.                 <td colspan="4">0td>
    94.             tr>
    95.         table>
    96.     div>
    97.     <div id="div3">
    98.         <p>编辑库存记录p>
    99.         <table id="fruit_add_tbl">
    100.             <tr>
    101.                 <th class="w30">名称:th>
    102.                 <td><input type="text" id="fname"/>td>
    103.             tr>
    104.             <tr>
    105.                 <th>单价:th>
    106.                 <td><input type="text" id="price"/>td>
    107.             tr>
    108.             <tr>
    109.                 <th>数量:th>
    110.                 <td><input type="text" id="fcount"/>td>
    111.             tr>
    112.             <tr>
    113.                 <th colspan="2">
    114.                     <input type="button" value="确定"/>
    115.                     <input type="reset" value="重填"/>
    116.                 th>
    117.             tr>
    118.         table>
    119.     div>
    120. div>
    121. body>
    122. html>

    2、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. }
    54. .w30 {
    55.     width: 30%;
    56. }
    57. #div3{
    58.     margin-left:20%;
    59.     border:1px solid lightgray;
    60.     width:60%;
    61.     margin-top: 16px;
    62.     padding-bottom: 16px;
    63. }
    64. #fruit_add_tbl {
    65.     width: 40%;
    66.     margin-left: 30%;
    67.     border: 1px solid lightgray;
    68.     border-collapse: collapse;
    69. }
    70. #fruit_add_tbl th,#fruit_add_tbl td {
    71.     border: 1px solid lightgrey;
    72.     padding: 4px;
    73. }
    74. #div3 p {
    75.     text-align: center;
    76.     letter-spacing: 4px;
    77. }
    78. #fruit_add_tbl input[type="button"],#fruit_add_tbl input[type="reset"] {
    79.     width: 100px;
    80.     height: 28px;
    81.     border: 1px solid lightgray;
    82. }
    83. #fruit_add_tbl input[type="text"] {
    84.     border: 1px solid lightgray;
    85.     height: 22px;
    86. }

    3、fruit.js

    1. function $(name) {
    2.     if (name) {
    3.         //假设name是  #fruit_tbl
    4.         if (name.startsWith("#")) {
    5.             name = name.substring(1);   //fruit_tbl
    6.             return document.getElementById(name);
    7.         } else {
    8.             return document.getElementsByName(name);  //返回的是NodeList类型
    9.         }
    10.     }
    11. }
    12.  
    13. //当页面加载完成后执行后面的匿名函数
    14. window.onload = function () {
    15.     //get:获取     Element:元素    By:通过...方式
    16.     //getElementById()根据id值获
    17.     let fruitTbl = $("#fruit_tbl");
    18.     //table.rows:获取这个表格的所有的行，返回数组
    19.     let rows = fruitTbl.rows;
    20.     //从 1 开始，因为 第 0 行是表头，不需要绑定事件
    21.     for (let i = 1; i < rows.length - 1; i++) {
    22.         let tr = rows[i];
    23.         //事件动态绑定
    24.         tr.onmouseover = showBGColor;
    25.         tr.onmouseout = clearBGColor;
    26.  
    27.         //cell:单元格、细胞
    28.         //获取这一行的所有的单元格
    29.         let tds = tr.cells;
    30.         let priceTD = tds[2];
    31.         //绑定鼠标悬浮事件
    32.         priceTD.onmouseover = showHand;
    33.  
    34.         //绑定点击事件
    35.         priceTD.onclick = editPrice
    36.  
    37.         //给删除小图标绑定鼠标悬浮和点击事件
    38.         let delImgTd = tds[5];
    39.         let delImg = delImgTd.firstChild;
    40.         delImg.onmouseover = showHand;
    41.         delImg.onclick = delFruit;
    42.     }
    43.     zj();
    44.  
    45.     //获取全选这个复选框
    46.     let ckAll = $("#ckAll");
    47.     ckAll.onchange = myCkAll;
    48.  
    49.     //获取所有的普通复选框
    50.     let ckArr = $("ck");
    51.     ckArr.forEach((item, index) => {
    52.         item.onchange = myCk;
    53.     });
    54.  
    55.     //给批量删除按钮绑定点击事件
    56.     const delsBtn = $("#delsBtn");
    57.     delsBtn.onclick = delFruits;
    58. };
    59. delFruits = function () {
    60.     if (confirm("是否确认批量删除？")) {
    61.         let fruitTbl = $("#fruit_tbl");
    62.         let rows = fruitTbl.rows;
    63.         let ckArr = $("ck");
    64.         // for (let i = rows.length - 3; i >= 0; i--) {
    65.         //     if (ckArr[i].checked) {
    66.         //        fruitTbl.deleteRow(i + 1);
    67.         //     }
    68.         // }
    69.  
    70.         for (let i = rows.length - 3; i >= 0; i--) {
    71.             if (ckArr[i].checked) {
    72.                 let rowIndex = ckArr[i].parentElement.parentElement.rowIndex;
    73.                 fruitTbl.deleteRow(rowIndex);
    74.             }
    75.         }
    76.         zj();
    77.     }
    78. };
    79. myCk = function () {
    80.     let ck = event.srcElement;
    81.     if (!ck.checked) { //说明是取消选中，则全选这个复选框一定是不选中的
    82.         $("#ckAll").checked = false;
    83.     } else {
    84.         let ckArr = $("ck");
    85.  
    86.         //NodeList 转化成 Array 的三种解决方法:
    87.         // 1、
    88.         //let ckArr2 = Array.prototype.slice.call(ckArr);
    89.         //$("#ckAll").checked = ckArr2.every(item => item.checked);
    90.  
    91.         //2、
    92.         //$("#ckAll").checked = [...ckArr].every(item => item.checked);
    93.  
    94.         //3、
    95.         let ckArr2 = Array.from(ckArr);
    96.         $("#ckAll").checked = ckArr2.every(item => item.checked);
    97.  
    98.         //4、直接使用for循环，遍历NodeList
    99.         // let flag = true;
    100.         // for (let i = 0; i < ckArr.length; i++) {
    101.         //     if (!ckArr[i].checked) {
    102.         //         flag = false;
    103.         //         break;
    104.         //     }
    105.         // }
    106.         // $("#ckAll").checked = flag;
    107.     }
    108. };
    109. myCkAll = function () {
    110.     let ckAll = $("#ckAll");
    111.     let flag = ckAll.checked;
    112.     //debugger
    113.     let ckArr = $("ck");
    114.     for (let i = 0; i < ckArr.length; i++) {
    115.         ckArr[i].checked = flag;
    116.     }
    117. };
    118. delFruit = function () {
    119.     if (window.confirm("是否删除？")) {
    120.         let fruitTbl = $("#fruit_tbl");
    121.         let delImg = event.srcElement;
    122.         if (delImg && delImg.tagName == "IMG") {
    123.             let tr = delImg.parentElement.parentElement;
    124.             //tr.rowIndex获取当前tr这一行的行索引
    125.             let rowIndex = tr.rowIndex;
    126.             //table对象有一个方法:deleteRow,能够删除指定索引位置的行
    127.             fruitTbl.deleteRow(rowIndex);
    128.             //重新计算总计
    129.             zj();
    130.         }
    131.     }
    132. };
    133. editPrice = function () {
    134.     let priceTD = event.srcElement;
    135.     //inner:在...内部
    136.  
    137.     let oldPrice = priceTD.innerText;
    138.  
    139.     //innerHTML:在节点内部填充一段HTML代码
    140.     //priceTD.innerHTML = "";
    141.     priceTD.innerHTML = "";
    142.     /**
    143.      * 
    144.      * first:第一个 child:孩子
    145.      * firstChild:第一个子节点
    146.      * @type {ActiveX.IXMLDOMNode | ChildNode | (() => (Node | null))}
    147.      */
    148.     let priceInput = priceTD.firstChild;
    149.     priceInput.value = oldPrice;
    150.  
    151.     priceInput.select();
    152.  
    153.     //绑定失去焦点事件
    154.     priceInput.onblur = updatePrice;
    155.  
    156.     //输入框绑定键盘摁下事件，用于判断摁下的值是否合法
    157.     priceInput.onkeydown = ckInput;
    158. };
    159. ckInput = function () {
    160.     // 0-9:48-57    backspace:8    enter:13
    161.     let kc = event.keyCode;
    162.     if (!((kc >= 48 && kc <= 57) || kc == 8 || kc == 13)) {
    163.         //取消事件
    164.         event.returnValue = false;
    165.     }
    166.     if (kc == 13) {
    167.         event.srcElement.blur();
    168.     }
    169. };
    170. updatePrice = function () {
    171.     let priceInput = event.srcElement;
    172.     let newPrice = priceInput.value;
    173.     let priceTD = priceInput.parentElement;
    174.     priceTD.innerText = newPrice;
    175.  
    176.     xj(priceTD.parentElement)
    177. };
    178. xj = function (tr) {
    179.     if (tr && tr.tagName == "TR") {
    180.         let tds = tr.cells;
    181.         let priceTD = tds[2];
    182.         let fcountTD = tds[3];
    183.         let xjTD = tds[4];
    184.  
    185.         let price = parseInt(priceTD.innerText);
    186.         let fcount = parseInt(fcountTD.innerText);
    187.         let xj = price * fcount;
    188.  
    189.         xjTD.innerText = xj;
    190.  
    191.         //同时更新总计
    192.         zj();
    193.     }
    194. };
    195. zj = function () {
    196.     let fruitTbl = $("#fruit_tbl");
    197.     let rows = fruitTbl.rows;
    198.     let total = 0;
    199.     for (let i = 1; i < rows.length - 1; i++) {
    200.         let tr = rows[i];
    201.         let xj = parseInt(tr.cells[4].innerText);
    202.         total += xj;
    203.     }
    204.     rows[rows.length - 1].cells[1].innerText = total;
    205. };
    206. function showHand() {
    207.     let priceTD = event.srcElement;
    208.     //cursor光标
    209.     priceTD.style.cursor = "pointer";
    210. }
    211. function showBGColor() {
    212.     //window.event表示当前发生的事件 ”window.“可以省略
    213.     // console.log(window.event);
    214.     // alert(window.event);
    215.     let obj = window.event.srcElement;
    216.     //alert(obj);
    217.     //console.log(obj);   //发现obj是td，而不是tr。事件传递现象
    218.  
    219.     if (obj.tagName == "TD") {
    220.         let td = obj;
    221.         //parentElement:父元素   td的父元素是tr。tr有很多td子元素
    222.         let tr = td.parentElement;
    223.         tr.style.backgroundColor = "purple";
    224.  
    225.         //获取当前所有单元格，然后设置单元格中字体的颜色
    226.         let tds = tr.cells;
    227.         for (let i = 0; i < tds.length; i++) {
    228.             tds[i].style.color = "white";
    229.         }
    230.     }
    231.  
    232. }
    233. function clearBGColor() {
    234.     let td = window.event.srcElement;
    235.     if (td.tagName == "TD") {
    236.         let tr = td.parentElement;
    237.         tr.style.backgroundColor = "transparent";
    238.  
    239.         //获取当前行所有单元格，然后设置单元格中字体的颜色
    240.         let tds = tr.cells;
    241.         for (let i = 0; i < tds.length; i++) {
    242.             tds[i].style.color = "#031f02";
    243.         }
    244.     }
    245. }

  • 相关阅读:
    C++特殊类设计
    【关于ensp的bug】关于网传mac地址颠倒学习的现象
    RocketMQ（17）——Broker可配置参数
    Android IPC | Android多进程模式
    【开发工具】vConsole - 手机前端开发调试利器
    Flink学习7：应用程序结构
    手把手教你使用云产品实现抖音同款微信早安推送(腾讯云Python版本)
    Leetcode P640
    在线系统运行慢，对其进行性能分析以及处置的方法【总结】
    linux下nvme各文件的含义
  • 原文地址：https://blog.csdn.net/m0_65152767/article/details/134447575