基于JavaScript水果库存系统主页面操作

书启秋枫

已于 2023-01-29 09:49:18 修改

阅读量582

点赞数 3

分类专栏： Web # JavaScript 文章标签：前端 html

于 2022-12-30 16:13:58 首次发布

本文链接：https://blog.csdn.net/qq_45037155/article/details/128497032

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Web

7 篇文章 1 订阅

订阅专栏

页面展示

效果1：更改单价，小计和总计跟随变动

效果2：随着鼠标移动每一行，每行表格背景颜色发生变动

效果3：点击删除图标删除所选行

效果4：全部勾选与单个勾选的实现

效果5：输入名称、单价、库存，可新填一行内容

一、页面布局

二、代码展示

1.HTML代码 fruit,html

<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../css/fruit.css">
  <script language="JavaScript" src="../js/fruit.js"></script>
</head>
<body>
<div id="div0">
  <table id="fruit_tbl">
    <caption class="fruit_title">水果库存页面</caption>
    <tr>
      <th class="w10"><input type="checkbox" id="ckAll"/></th>
      <th class="w20">名称</th>
      <th class="w25">单价</th>
      <th class="w15">数量</th>
      <th class="w20">小计</th>
      <th>操作</th>
    </tr>
    <tr>
      <td><input type="checkbox" name="ck"/></td>
      <td>苹果</td>
      <td>5</td>
      <td>2</td>
      <td>10</td>
      <td><img name="delImg" src="../imgs/del.png" class="delImg"/></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="ck"/></td>
      <td>菠萝</td>
      <td>4</td>
      <td>5</td>
      <td>20</td>
      <td><img name="delImg" src="../imgs/del.png" class="delImg"/></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="ck"/></td>
      <td>香蕉</td>
      <td>3</td>
      <td>10</td>
      <td>30</td>
      <td><img name="delImg" src="../imgs/del.png" class="delImg"/></td>
    </tr>
    <tr>
      <td colspan="2">总计</td>
      <td colspan="4">60</td>
    </tr>
  </table>

  <table id="add_fruit">
    <caption class="add_fruit_title">添加新库存</caption>
    <tr>
      <th>名称：</th>
      <td><input type="text" id="fname"/></td>
    </tr>
    <tr>
      <th>单价：</th>
      <td><input type="text" id="price"/></td>
    </tr>
    <tr>
      <th>库存：</th>
      <td><input type="text" id="fcount"/></td>
    </tr>
    <tr>
      <th colspan="2">
        <input type="button" value="添加" id="addBtn"/>
        <input type="reset" value="重填"/>
      </th>
    </tr>

  </table>
</div>
</body>
</html>

2.CSS代码 fruit.css

body {
    background-color: darkslategray;
    padding: 0;
    margin: 0;
}

div {
    position: relative;
    float: left;
}

#div0 {
    background-color: beige;
    width: 60%;
    margin-left: 20%;
    height: 100%;
}

#fruit_tbl {
    border: 1px solid lightgray;
    width: 80%;
    margin-left: 10%;
    margin-top: 64px;
    line-height: 28px;
    border-collapse: collapse; /*collapse:合并*/
}

#fruit_tbl, #fruit_tbl tr, #fruit_tbl td, #fruit_tbl th {
    text-align: center;
    border: 1px solid lightgray;
    font-weight: lighter;
}

.delImg {
    width: 24px;
    height: 24px;
}

.fruit_title {
    font-size: 24px;
    letter-spacing: 8px;
    margin-bottom: 8px;
}

.w10 {
    width: 10%;
}

.w15 {
    width: 15%;
}

.w20 {
    width: 20%;
}

.w25 {
    width: 25%;
}

#add_fruit {
    width: 40%;
    margin-left: 30%;
    border: 1px solid lightgray;
    border-collapse: collapse;
    line-height: 26px;
}

#add_fruit, #add_fruit td, #add_fruit th {
    font-size: 14px;
    font-weight: lighter;
    border: 1px solid lightgray;
}

.add_fruit_title {
    font-size: 18px;
    font-weight: lighter;
    letter-spacing: 4px;
    margin-top: 32px;
    margin-bottom: 8px;
}

#add_fruit td input {
    margin-left: 4px;
}

3.JS代码 fruit.js

//根据id或者name查找元素
function $(name) {
    if (name.substring(0, 1) == "#") {
        name = name.substring(1);
        return document.getElementById(name);
    } else {
        return document.getElementsByName(name);
    }
}

function showBGColor() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        //event：事件
        //srcElement:事件源
        //tagName:标签名
        //alert(event.srcElement.tagName);  //弹出TD
        var td = event.srcElement;
        //tr和td是什么关系呢？
        //td是tr的子元素，tr是td的父元素
        var tr = td.parentElement;
        //节点.style 表示开始设置或者获取某节点的样式
        tr.style.backgroundColor = "darkblue";

        //cells：一行的所有的单元格
        var tdArr = tr.cells;
        for (var i = 0; i < tdArr.length; i++) {
            var tdTemp = tdArr[i];
            tdTemp.style.color = "white";
        }
    }
}

function clearBGColor() {
    /*
    在java语言中，if(flag) 要求flag是布尔类型
    在js语言中，if(flag)
        flag为 null，0 表示 false
        flag不为null，非0 表示true
     */
    //如果event不为null（也就是说存在)，而且事件源存在 ，而且事件源是TD
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        var tr = td.parentElement;
        tr.style.backgroundColor = "transparent"; //transparent:透明色
        var tdArr = tr.cells;
        for (var i = 0; i < tdArr.length; i++) {
            var tdTemp = tdArr[i];
            tdTemp.style.color = 'black';
        }
    }
}

//window代表当前窗口
//onload代表加载完成
//也就是：当窗口加载完成时执行后面的匿名函数
window.onload = function () {

    //document:文档
    //get:获取  Element:元素  ById:根据Id
    //根据id属性值获取元素
    var fruitTbl = $("#fruit_tbl");
    //rows:获取表格的所有的行
    var rows = fruitTbl.rows;
    for (var i = 1; i < rows.length - 1; i++) {
        var tr = rows[i];
        //动态绑定事件
        //1.绑定鼠标悬浮和离开事件
        tr.onmouseover = showBGColor; //注意这里后面没有小括号
        tr.onmouseout = clearBGColor;

        var tds = tr.cells;
        //2.绑定鼠标悬浮在单价单元格变手的事件
        var priceTD = tds[2];
        priceTD.onmouseover = showHand;
        //3.绑定单击单价单元格时能够编辑单价
        priceTD.onclick = editPrice;
    }

    //给每一个删除小图标绑定点击事件
    var delImgs = $("delImg");
    for (var i = 0; i < delImgs.length; i++) {
        delImgs[i].onclick = delFruit;
    }

    //给全选复选框绑定点击事件
    $("#ckAll").onclick = checkAll;

    //给每一个普通复选框绑定点击事件
    var ckArr = $("ck");
    for (var i = 0; i < ckArr.length; i++) {
        var ck = ckArr[i];
        ck.onclick = myck;
    }

    //给添加按钮绑定点击事件
    $("#addBtn").onclick = addFruit;
}

function myck() {
    if (event && event.srcElement && event.srcElement.tagName == "INPUT") {
        var ck = event.srcElement;
        //如果某一个普通复选框被取消选中，则全选的那个复选框一定是取消选中状态
        if (!ck.checked) {
            $("#ckAll").checked = false;
        } else {
            //如果某一个复选框是被选中的，那么需要循环判断其他普通复选框，如果都被选中了，则全选复选框应该被选中
            var ckArr = $("ck");
            var flag = true;   //定义一个flag，值为true，表示默认都选中
            for (var i = 0; i < ckArr.length; i++) {
                var ckTemp = ckArr[i];
                if (!ckTemp.checked) {//如果有一个没有被选中，则flag直接是false，而且也没有必要再往下继续判断了
                    flag = false;
                    break;
                }
            }
            $("#ckAll").checked = flag;

        }
    }
}

function checkAll() {
    var ckAll = $("#ckAll");
    var ckArr = $("ck");
    for (var i = 0; i < ckArr.length; i++) {
        var ck = ckArr[i];
        ck.checked = ckAll.checked;
    }
}

function showHand() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        //cursor:光标
        //hand / pointer : 手的形状
        td.style.cursor = 'pointer'; //'hand';
    }
}

function editPrice() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;

        //先拿到td中的文本(旧的价格)
        //innerText : 内部文本
        var oldPrice = td.innerText;
        //innerHTML : 内部的HTML代码
        td.innerHTML = "<input type='text' size='1'/>";
        //firstChild：第一个子节点
        //因为刚刚通过innerHTML给td赋值了，所以td的第一个子节点就是input
        var input = td.firstChild;
        input.value = oldPrice;
        //select()表示通过代码将输入框中的内容选中
        input.select();

        //onblur:当失去焦点
        input.onblur = updatePrice;

        //key:键盘  down:向下
        //onkeydown:当键盘摁下的时候
        input.onkeydown = ckInput;
    }
}

function updatePrice() {
    if (event && event.srcElement && event.srcElement.tagName == "INPUT") {
        var input = event.srcElement;
        //获取文本框中的值,也就是新价格
        var newPrice = input.value;
        //input输入框的父元素是td
        var td = input.parentElement;
        //将新价格文本覆盖到td中去
        td.innerText = newPrice;

        //更新小计
        updateXJ(td.parentElement);
    }
}

function updateXJ(tr) {
    if (tr) {
        //获取这一行的所有单元格
        var tds = tr.cells;
        //parseInt:将字符串转化成整形，从而能够进行数学运算
        var price = parseInt(tds[2].innerText);
        var count = parseInt(tds[3].innerText);
        var xj = price * count;
        tds[4].innerText = xj;

        //更新总计
        updateZJ();
    }
}

function updateZJ() {
    var fruitTbl = $("#fruit_tbl");
    var rows = fruitTbl.rows;
    var total = 0;
    for (var i = 1; i < rows.length - 1; i++) {
        var tr = rows[i];
        var tds = tr.cells;
        total = total + parseInt(tds[4].innerText);
    }
    rows[rows.length - 1].cells[1].innerText = total;
}

function ckInput() {
    if (event && event.srcElement && event.srcElement.tagName == "INPUT") {
        var kc = event.keyCode;
        //console.log(kc);
        //0-9:48-57
        //backspace:8
        //enter:13
        if (!((kc >= 48 && kc <= 57) || kc == 8 || kc == 13)) {
            //如果摁下的不是0-9，不是backspace，不是enter，那么我们应该忽略
            //event有一个returnValue属性。如果值是false，表示取消默认行为
            event.returnValue = false;
        }
        if (kc == 13) {
            var input = event.srcElement;
            input.blur();//主动触发一下输入框的失去焦点
        }
    }
}

function delFruit() {
    if (event && event.srcElement && event.srcElement.tagName == "IMG") {
        if (window.confirm("是否确认删除？")) {
            var img = event.srcElement;
            var td = img.parentElement;
            var tr = td.parentElement;
            var fruitTbl = $("#fruit_tbl");
            //tr.rowIndex 获取tr的行索引
            //table.deleteRow(index) 根据行索引删除指定的行
            fruitTbl.deleteRow(tr.rowIndex);

            updateZJ();
        }
    }
}

function addFruit() {
    var fname = $("#fname").value;
    var price = parseInt($("#price").value);
    var fcount = parseInt($("#fcount").value);
    var xj = price * fcount;

    var fruitTbl = $("#fruit_tbl");
    //table.insertRow()表示在最后一行添加新行
    //table.insertRow(rowIndex)在指定的索引位置新增一行
    //在最后一行的位置新增一行，那么原本的最后一行被挤到下面
    var tr = fruitTbl.insertRow(fruitTbl.rows.length - 1);
    //insertCell()在某一行新增单元格
    var td0 = tr.insertCell();
    td0.innerHTML = "<input type='checkbox' name='ck'/>";
    var td1 = tr.insertCell();
    td1.innerText = fname;
    var td2 = tr.insertCell();
    td2.innerText = price;
    var td3 = tr.insertCell();
    td3.innerText = fcount;
    var td4 = tr.insertCell();
    td4.innerText = xj;
    var td5 = tr.insertCell();
    td5.innerHTML = "<img name='delImg' src='../imgs/del.png' class='delImg'/>";

    //给新行绑定各种事件
    tr.onmouseover = showBGColor;
    tr.onmouseout = clearBGColor;
    //给单价单元格绑定事件
    td2.onmouseover = showHand;
    td2.onclick = editPrice;
    //给删除小图标绑定点击事件
    var delImg = td5.firstChild;
    delImg.onclick = delFruit;
    //给普通复选框绑定点击事件
    var ck = td0.firstChild;
    ck.onclick = myck;

    //更新总计
    updateZJ();
}

书启秋枫

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于JavaScript水果库存系统主页面操作

效果2：随着鼠标移动每一行，每行表格背景颜色发生变动。效果5：输入名称、单价、库存，可新填一行内容。效果1：更改单价，小计和总计跟随变动。效果4：全部勾选与单个勾选的实现。效果3：点击删除图标删除所选行。
复制链接

扫一扫