JS-水果库存记录实现全选全不选功能

1、fruit.js

function $(name) {
    if (name) {
        //假设name是  #fruit_tbl
        if (name.startsWith("#")) {
            name = name.substring(1);   //fruit_tbl
            return document.getElementById(name);
        } else {
            return document.getElementsByName(name);
        }
    }
}
 
//当页面加载完成后执行后面的匿名函数
window.onload = function () {
    //get:获取     Element:元素    By:通过...方式
    //getElementById()根据id值获
    let fruitTbl = $("#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
 
        //给删除小图标绑定鼠标悬浮和点击事件
        let delImgTd = tds[5];
        let delImg = delImgTd.firstChild;
        delImg.onmouseover = showHand;
        delImg.onclick = delFruit;
    }
    zj();
 
    //获取全选这个复选框
    let ckAll = $("#ckAll");
    ckAll.onchange = myCkAll;
 
    //获取所有的普通复选框
    let ckArr = $("ck");
    ckArr.forEach((item,index)=>{
        item.onchange = myCk;
    })
};
myCk = function () {
    let ck = event.srcElement;
    if (!ck.checked) { //说明是取消选中，则全选这个复选框一定是不选中的
        $("#ckAll").checked = false;
    } else {
        let ckArr = $("ck");
        let flag = true;
        for (let i = 0; i < ckArr.length; i++) {
            if (!ckArr[i].checked) {
                flag = false;
                break;
            }
        }
        $("#ckAll").checked = flag;
    }
};
myCkAll = function () {
    let ckAll = $("#ckAll");
    let flag = ckAll.checked;
    //debugger
    let ckArr = $("ck");
    for (let i = 0; i < ckArr.length; i++) {
        ckArr[i].checked = flag;
    }
};
delFruit = function () {
    if (window.confirm("是否删除？")) {
        let fruitTbl = $("#fruit_tbl");
        let delImg = event.srcElement;
        if (delImg && delImg.tagName == "IMG") {
            let tr = delImg.parentElement.parentElement;
            //tr.rowIndex获取当前tr这一行的行索引
            let rowIndex = tr.rowIndex;
            //table对象有一个方法:deleteRow,能够删除指定索引位置的行
            fruitTbl.deleteRow(rowIndex);
            //重新计算总计
            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;
 
    //输入框绑定键盘摁下事件，用于判断摁下的值是否合法
    priceInput.onkeydown = ckInput;
};
ckInput = function () {
    // 0-9:48-57    backspace:8    enter:13
    let kc = event.keyCode;
    if (!((kc >= 48 && kc <= 57) || kc == 8 || kc == 13)) {
        //取消事件
        event.returnValue = false;
    }
    if (kc == 13) {
        event.srcElement.blur();
    }
};
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 = $("#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。事件传递现象
 
    if (obj.tagName == "TD") {
        let td = obj;
        //parentElement:父元素   td的父元素是tr。tr有很多td子元素
        let tr = td.parentElement;
        tr.style.backgroundColor = "purple";
 
        //获取当前所有单元格，然后设置单元格中字体的颜色
        let tds = tr.cells;
        for (let i = 0; i < tds.length; i++) {
            tds[i].style.color = "white";
        }
    }
 
}
function clearBGColor() {
    let td = window.event.srcElement;
    if (td.tagName == "TD") {
        let tr = td.parentElement;
        tr.style.backgroundColor = "transparent";
 
        //获取当前行所有单元格，然后设置单元格中字体的颜色
        let tds = tr.cells;
        for (let i = 0; i < tds.length; i++) {
            tds[i].style.color = "#031f02";
        }
    }
}

2、fruit.html

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" id="ckAll"/>th>
                    <th class="w20">名称th>
                    <th class="w20">单价th>
                    <th class="w20">数量th>
                    <th class="w20">小计th>
                    <th class="w10">操作th>
                tr>
                
                
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>苹果td>
                    <td>5td>
                    <td>2td>
                    <td>10td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>菠萝td>
                    <td>3td>
                    <td>5td>
                    <td>15td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>哈密瓜td>
                    <td>4td>
                    <td>5td>
                    <td>20td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>葡萄td>
                    <td>10td>
                    <td>5td>
                    <td>50td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>青梅td>
                    <td>10td>
                    <td>5td>
                    <td>50td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>人参果td>
                    <td>10td>
                    <td>5td>
                    <td>50td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>菠萝蜜td>td>
                    <td>10td>
                    <td>5td>
                    <td>50td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td><input type="checkbox" name="ck"/>td>
                    <td>西红柿td>
                    <td>10td>
                    <td>5td>
                    <td>50td>
                    <td><img src='imgs/del.png' class="delBtn"/>td>
                tr>
                <tr>
                    <td colspan="2">总结:td>
                    <td colspan="4">0td>
                tr>
            table>
        div>
    div>
body>
html>

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

4、#

在JavaScript中，#号（井号）有以下用途：

1. 在URL中，#号用于定位一个页面内的特定位置，被称为锚点。例如：https://www.example.com#section1，会滚动到页面中id为“section1”的元素位置。

2. 在CSS中，#号被用于选择某个具有特定id属性的元素。例如：#myDiv {color: red;}，表示选择id为“myDiv”的元素，并将其文本颜色设置为红色。

3. 在正则表达式中，#号被用作注释符号。例如：/^[a-z]#匹配小写字母/，表示#号后面的内容是注释，不会被解析为正则表达式的一部分。

在JavaScript中，#号有两种主要的用途：

1. 在URL中，#号用来标记锚点。例如，当页面有多个章节时，可以使用#号为每个章节生成一个锚点，以便用户可以通过点击链接快速跳转到指定章节。

2. 在CSS中，#号可以用来选择指定ID的元素并应用样式。例如，如果HTML中有一个元素的ID为“myElement”，则可以使用#myElement选择该元素并应用CSS样式。

需要注意的是，虽然#号在JavaScript中有这两种常见的用途，但在不同的上下文中，它可能会有其他的含义和用途。

在JavaScript中，#号通常用于表示HTML文档中的锚点，以及用于处理URL中的片段标识符（也称作哈希值或锚点）。

在HTML文档中，#号后面跟随一个元素的ID时，可以将页面滚动到该元素的位置，例如:

<a href="#section1">跳转到区域1a>
...
<div id="section1">这是区域1div>

点击上面的链接，页面会滑动到id为"section1"的div元素的位置。

另一方面，在处理URL时，#号后面跟随的内容被称为片段标识符，它用于向服务器提交特定的请求，或在客户端内部实现网页内部的导航。例如:

https://www.example.com/page.html#section1

在这个URL中，#号后面的"section1"表示要导航到页面中的特定区域。JavaScript中可以使用location.hash来获取或设置URL中的片段标识符。