前端学习笔记（代码）

肿么啦！

已于 2022-02-12 14:59:15 修改

阅读量466

点赞数

分类专栏：前端 HTML学习文章标签：前端 javascript html css

于 2022-02-12 14:57:53 首次发布

本文链接：https://blog.csdn.net/weixin_46048220/article/details/122896614

版权

HTML学习同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

fruit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fruit</title>
    <link rel="stylesheet" href="css/fruitCss.css">
    <script type="text/javascript" src="js/fruit.js"></script>
</head>
<body>
    <div id="div_container">
        <div id="div_fruit_list">
            <table id="tbl_fruit">
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>5</td>
                    <td>500</td>
                    <td>2500</td>
                    <td><img src="images/img.png" class="delImg"></td>
                </tr>
                <tr>
                    <td>方果</td>
                    <td>6</td>
                    <td>400</td>
                    <td>2400</td>
                    <td><img src="images/img.png" class="delImg"></td>
                </tr>
                <tr>
                    <td>圆果</td>
                    <td>7</td>
                    <td>300</td>
                    <td>2100</td>
                    <td><img src="images/img.png" class="delImg"></td>
                </tr>
                <tr>
                    <td>扁果</td>
                    <td>8</td>
                    <td>200</td>
                    <td>1600</td>
                    <td><img src="images/img.png" class="delImg"></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">8600</td>
                </tr>
            </table>
            <br/><br/>
            <hr/>
            <div id="add_fruit_div">
                <table id="tbl_add_fruit">
                    <tr>
                        <td>名称</td>
                        <td><input type="text" id="fname" value="u"/></td>
                    </tr>
                    <tr>
                        <td>单价</td>
                        <td><input type="text" id="price" value="2"/></td>
                    </tr>
                    <tr>
                        <td>数量</td>
                        <td><input type="text" id="fcount" value="3"/></td>
                    <tr>
                        <th colspan="2">
                            <input type="button" id="add_btn" class="btn" value="添加"/>
                            <input type="button" class="btn" value="重置"/>
                        </th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

fruit.js

//当窗口执行完成后，执行匿名函数
window.onload=function (){
    // alert("hi");
    //当页面加载完成，绑定各种事件
    // document 代表给定浏览器窗口中的 HTML 文档。
    // getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
    var fruitTbl=document.getElementById("tbl_fruit");
    //rows 获取来自于 table 对象的 tr (表格行)对象的集合。
    var rows=fruitTbl.rows;
    for (var i=1;i<rows.length;i++){
        var tr=rows[i];
        trBindEvent(tr);
    }
    document.getElementById("add_btn").onclick=addFruit;
}

function trBindEvent(tr){
    // 1,绑定鼠标悬浮设置背景颜色事件
    tr.onmouseover=showBgColor;
    tr.onmouseout=clearBgColor;
    //获取tr这一行的所有单元格
    var cells=tr.cells;
    var priceTD=cells[1];
    //2,绑定鼠标悬浮在单价单元格时光标变成手势图标的事件
    priceTD.onmouseover=showHand;
    //3,绑定鼠标点击单价单元格事件
    priceTD.onclick=editPrice;

    //7，绑定删除小图标的点击事件
    var img=cells[4].firstChild;    //找到td标签下的img标签
    if (img&&img.tagName=="IMG"){
        //绑定单击事件
        img.onclick=delFruit;
    }
}

// 实现鼠标悬浮时显示背景颜色
function showBgColor(){
    //event：代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。
    //event.srcElement：事件源
    // alert(event.srcElement);
    // alert(event.srcElement.tagName);    -->TD
    if (event&&event.srcElement&&event.srcElement.tagName=="TD"){
        var td=event.srcElement;
        //td.parentElement表示获取td的父元素——>TR
        var tr=td.parentElement;
        //如果想要通过js代码设置某节点的样式，则需要加上.style
        tr.style.backgroundColor="deepskyblue";
        // tr.cells表示获取这个tr中的所有单元格
        var tds=tr.cells;
        for (var i=0;i<tds.length;i++){
            tds[i].style.color="white";
        }
    }
}
//当鼠标离开时，恢复原始样式
function clearBgColor(){
    if (event&&event.srcElement&&event.srcElement.tagName=="TD"){
        var td=event.srcElement;
        var tr=td.parentElement;
        tr.style.backgroundColor="transparent";
        var tds=tr.cells;
        for (var i=0;i<tds.length;i++){
            tds[i].style.color="slategrey";
        }
    }
}
//当鼠标悬浮在单价单元格时，显示手势图标
function showHand(){
    if (event&&event.srcElement&&event.srcElement.tagName=="TD") {
        var td=event.srcElement;
        // cursor:光标
        td.style.cursor="hand";
    }
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
    if (event&&event.srcElement&&event.srcElement.tagName=="TD") {
        var priceTD=event.srcElement;
        // Integer that receives one of the following values.
        // 1 Element node.
        // 3 Text node.
        //判断当前price TD有子节点，而且第一个子节点为一个文本节点
        if (priceTD.firstChild&&priceTD.firstChild.nodeType==3){
            //表示设置或者获取当前节点的内部文本
            var oldPrice=priceTD.innerText;
            //innerHTML表示在当前节点的内部设置HTML代码(在”TD“的内部添加HTML代码)
            priceTD.innerHTML="<input type='text' size='4'/>";
            // 效果：<td><input type='text' size='4' value=''/></td>
            //获取第一个子节点，即input
            var input=priceTD.firstChild;
            //判断是否成功获取子节点
            if (input.tagName=="INPUT"){
                input.value=oldPrice;
                //选择输入框内部的文本
                // Select():高亮显示表单元素的输入区域
                input.select();
                //4,绑定输入框失去焦点事件，失去焦点，更新单价
                // Fires when the object loses the input focus.
                input.onblur=updatePrice;

                //8，在输入框绑定键盘按下的事件，此处需要保证用户输入的是数字
                input.onkeydown=checkInput;
            }
        }
    }
}

function updatePrice(){
    if (event&&event.srcElement&&event.srcElement.tagName=="INPUT"){
        var input=event.srcElement;
        var newPrice=input.value;
        //input节点的父节点是td
        var priceTD=input.parentElement;
        priceTD.innerText=newPrice;
        //5，更新当前行的小计的值
        //priceTD.parentElement td的父元素是tr
        updateXJ(priceTD.parentElement);
    }
}

//更新指定行的小计
function updateXJ(tr){
    if (tr&&tr.tagName=="TR"){
        var tds=tr.cells;
        //获取值
        var price=tds[1].innerText;
        var count=tds[2].innerText;
        //innerText获取到值的类型的是字符串，因此需要类型转换
        var xj=parseInt(price)*parseInt(count);
        // alert(xj);
        tds[3].innerText=xj;
        //6，更新总计
        updateZJ();
    }
}

//更新总计
function updateZJ(){
    var fruitTbl=document.getElementById("tbl_fruit");
    var rows=fruitTbl.rows;
    var sum=0;
    for (var i=1;i<rows.length-1;i++){
        var tr=rows[i];
        //tr.cells[3]:获取节点，tr.cells[3].innerText:获取节点的值
        var xj=parseInt(tr.cells[3].innerText);
        sum=sum+xj;
    }
    rows[rows.length-1].cells[1].innerText=sum;
}

//删除行
function delFruit() {
    if (event && event.srcElement && event.srcElement.tagName == "IMG") {
        //alert：弹出一个对话框，只有确定按钮
        //confirm：弹出一个对话框，有确定和取消按钮，点击确定，返回true，否则返回false
        if (window.confirm("是否删除当前库存记录")){
            var img=event.srcElement;
            var tr=img.parentElement.parentElement;
            // deleteRow 从表格及 rows 集合中删除指定行(tr)。
            // rowIndex 获取对象在表格的 rows 集合中的位置。
            var fruitTbl=document.getElementById("tbl_fruit");
            fruitTbl.deleteRow(tr.rowIndex);
            updateZJ();
        }
    }
}

//检验键盘输入值是否为数字
function checkInput(){
    // keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。
    var kc=event.keyCode;
    //0~9：48~57
    //backspace：8
    //enter：13
    if (!(kc>=49&&kc<=57||kc==8||kc==13)){
        // returnValue 设置或获取事件的返回值。
        event.returnValue=false;    //键盘输入的内容不被接收
    }
    if (kc==13){
        // Causes the element to lose focus and fires the onblur event.
        event.srcElement.blur();
    }
}

//添加水果信息
function addFruit(){
    var fname=document.getElementById("fname").value;
    var price=parseInt(document.getElementById("price").value);
    var fcount=parseInt(document.getElementById("fcount").value);
    var xj=price*fcount;

    var fruitTbl=document.getElementById("tbl_fruit");
    //在表格中倒数第一行之前添加一行
    var tr=fruitTbl.insertRow(fruitTbl.rows.length-1);
    var fnameTD=tr.insertCell();
    fnameTD.innerText=fname;

    var priceTD=tr.insertCell();
    priceTD.innerText=price;

    var fcountTD=tr.insertCell();
    fcountTD.innerText=fcount;

    var xjTD=tr.insertCell();
    xjTD.innerText=xj;

    var imgTD=tr.insertCell();
    imgTD.innerHTML="<img src='images/img.png' class='delImg'/>";

    updateZJ();

    trBindEvent(tr);
}

fruitCss.css

body{
    margin: 0;
    padding: 0;
    background-color: antiquewhite;
}
div{
    position: relative;
    float: left;
}
#div_container{
    width: 80%;
    height: 900px;
    border: 1px solid deepskyblue;
    margin-left: 10%;
    float: left;
    background-color: honeydew;
    border-radius: 5px;
}

#div_fruit_list{
    width: 100%;
    border: 0px solid black;
}
#tbl_fruit{
    width: 60%;
    line-height: 30px;
    margin-top: 120px;
    margin-left: 20%;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
    border: 1px solid lightblue;
    border-collapse: collapse;
    text-align: center;
    font-size: 16px;
    font-family: 宋体;
    color: slategrey;
}
.delImg{
    width: 24px;
    height: 24px;
}
.btn{
    border:1px solid lightblue;
    font-family: 宋体;
    color: chartreuse;
    font-weight: bolder;
    border-radius: 5px;
}
#add_fruit_div{
    width: 60%;
    height: 0%;
    border: 0px solid deepskyblue;
    margin-left: 20%;
    float: left;
    background-color: honeydew;
    border-radius: 5px;
}
#tbl_add_fruit{
    width: 40%;
    line-height: 30px;
    margin-top: 40px;
    margin-left: 30%;
}
#tbl_add_fruit,#tbl_add_fruit tr,#tbl_add_fruit th,#tbl_add_fruit td{
    border: 0px solid lightblue;
    border-collapse: collapse;
    text-align: center;
    font-size: 16px;
    font-family: 宋体;
    color: slategrey;
}

在这里插入图片描述

肿么啦！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记（代码）

fruit.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>fruit</title> <link rel="stylesheet" href="css/fruitCss.css"> <script type="text/javascript" src="js/fruit.js">
复制链接

扫一扫