基于JavaScript水果库存系统主页面操作-天翼云

页面展示

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

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

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

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

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

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

一、页面布局

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

二、代码展示

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

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

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

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

页面展示

一、页面布局

二、代码展示

1.HTML代码 fruit,html

2.CSS代码 fruit.css

3.JS代码 fruit.js

相关文章

JavaScript学习笔记（7.0）

Typescript学习笔记（1.0）

JavaScript学习笔记（9.0）

快速上手Apache

关于 SAP UI5 里包含的 jQuery 版本

JavaScript初识及基本语法入门

JavaScript代码高亮

prometheus 配置

iOS中动态更新补丁策略JSPatch运用基础二

5 个 JavaScript “罕见”原生的 API

作者介绍

最新文章

JavaScript学习笔记（7.0）

Typescript学习笔记（1.0）

JavaScript学习笔记（9.0）

快速上手Apache

关于 SAP UI5 里包含的 jQuery 版本

JavaScript初识及基本语法入门

热门文章

html+css实战183-购物车

Python：使用2to3将Python2转Python3

5 个 JavaScript “罕见”原生的 API

TypeScript-webpack配置

html：canvas画布绘图简单入门

js中通过正则表达式验证邮箱是否合法

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

bootstrap笔记——按钮样式

css动画之@keyframes

CSS基础（下）

JavaScript-深拷贝和浅拷贝

路径Path模块

Vue课程25-配置和使用clean-webpack-plugin