【JavaWeb】CSS,JS相关

最新推荐文章于 2024-08-12 22:06:26 发布

weixin_46622498

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量352

点赞数

文章标签： css javascript elementui

本文链接：https://blog.csdn.net/weixin_46622498/article/details/122914302

版权

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="demo01.css">
    <script type="text/javascript" src="demo09.js"></script>
</head>
<body>
<div id="div_container">
    <div id="div_fruit_list">
        <table id="tbl_fruit">
            <tr>
                <th class="w20">名称</th>
                <th class="w20">单价</th>
                <th class="w20">数量</th>
                <th class="w20">小计</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>苹果</td>
                <td>5</td>
                <td>20</td>
                <td>100</td>
                <td><img src="del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>西瓜</td>
                <td>3</td>
                <td>20</td>
                <td>60</td>
                <td><img src="del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>菠萝</td>
                <td>4</td>
                <td>25</td>
                <td>100</td>
                <td><img src="del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>榴莲</td>
                <td>3</td>
                <td>30</td>
                <td>90</td>
                <td><img src="del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="4">999</td>
            </tr>
        </table>
        <hr/>
        <div id="add_fruit_div">
            <table id="add_fruit_tbl">
                <tr>
                    <td class="w30">名称：</td>
                    <td ><input class="input"type="text" id="fname"></td>
                </tr>
                <tr>
                    <td>单价：</td>
                    <td ><input class="input" type="text" id="price"></td>
                </tr>
                <tr>
                    <td>数量：</td>
                    <td><input class="input" type="text" id="fcount"></td>
                </tr>
                <tr>
                    <td><input type="button" id="addBtn" value="添加"></td>
                    <td><input type="button" value="重置"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>

*{
    color: threeddarkshadow;
}
body{
    margin:0;
    padding:0;
    background-color:#808080;
}
div{
    position:relative;
    float:left;
}

#div_container{
    width:80%;
    height:100%;
    border:0px solid blue;
    margin-left:10%;
    float:left;
    background-color: honeydew;
    border-radius:8px;
}
#div_fruit_list{
    width:100%;
    border:0px solid red;
}
#tbl_fruit{
    width:60%;
    line-height:28px;
    margin-top:120px;
    margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
    border:1px solid gray;
    border-collapse:collapse;
    text-align:center;
    font-size:16px;
    font-family:"黑体";
    font-weight:lighter;

}
.w20{
    width:20%;
}
.delImg{
    width:24px;
    height:24px;
}
.btn{
    border:1px solid lightgray;
    width:80px;
    height:24px;
}
#add_fruit_div{
    border: 0px solid red;
    width: 40%;
    margin-left: 30%;
}
#add_fruit_tbl{
    width: 80%;
    margin-top:32px;
    margin-left: 10%;
    border-collapse: collapse;
}
#add_fruit_tbl,#add_fruit_tbl tr,#add_fruit_tbl td{
    border: 1px solid lightcoral;
    text-align: center;
    line-height: 28px;
}
.w30{
    width: 30%;
}
.input{
    padding-left: 4px;
    border: 1px solid green;
    width: 90%;
}

window.onload=function (){
    //当页面加载完成，我们需要绑定各种事件
    //根据ID获取表格
    var fruitTbl = document.getElementById("tbl_fruit");
    var rows=fruitTbl.rows;
    for(var i=1;i<rows.length-1;i++){
        var tr=rows[i];
        //绑定事件，并不是执行事件，所以不能加小括号
        tr.onmouseover=showBGColor;
        tr.onmouseout=clearBGColor;
        //获取某一行所有单元格
        var tds=tr.cells;
        var priceID=tds[1];
        priceID.onmouseover=showHand;

        //绑定鼠标点击单价单元格的事件（可以对单价进行编辑）
        priceID.onclick=editPrice;

        //绑定删除小图标的点击事件
        var img=tds[4].firstChild;
        if(img&&img.tagName=="IMG"){
            img.onclick=delFruit;
        }
    }

    document.getElementById("addBtn").onclick=addFruit;




}

function addFruit(){
    var fname=document.getElementById("fname").value;
    var price= parseInt(document.getElementById("price").value);


}


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;
            var fruitTbl=document.getElementById("tbl_fruit");
            fruitTbl.deleteRow(tr.rowIndex);
            updateZJ();
        }


    }
}




function editPrice(){
    if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
        var priceID=event.srcElement;
        //判断当前priceID有子节点，而且第一个子节点是文本节点
        if(priceID.firstChild&&priceID.firstChild.nodeType==3){
            //innerText:表示设置或者获取当前节点的内部文本
            var oldPrice=priceID.innerText;
            priceID.innerHTML="<input type='text' size='4'/>";
            //<td><input type='text' size='4'/></td>
            var input=priceID.firstChild;
            if(input.tagName=="INPUT"){
                input.value=oldPrice;
                //表示选中内部的文本
                input.select();
                //绑定输入框失去焦点事件，失去焦点就更新单价
                input.onblur=updatePrice;
                //在输入框上绑定键盘按下的事件，此处需要保证用户输入的是数字
                input.onkeydown=ckInput;

            }
        }
    }
}

//检验键盘按下的值的方法
function ckInput(){
    var kc=event.keyCode;
    //0-9的asc码：48-57
    //backspace：8
    //enter：13
    //console.log(kc)
    if(!((kc>=48&&kc<=57)||kc==8||kc==13)){
        event.returnValue=false;
    }
    if(kc==13){
        event.srcElement.blur();
    }

}

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
        //更新当前行的小计,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获取的是字符串类型，所以需要parseInt转换
        var XJ=parseInt(price)*parseInt(count);
        tds[3].innerText=XJ;
        //更新总计
        updateZJ();
    }
}

function updateZJ(){
    //获取table
    var fruitTble=document.getElementById("tbl_fruit");
    var rows=fruitTble.rows;
    var sum=0;
    for(var i=1;i<rows.length-1;i++){
        var tr=rows[i];
        //把内部的文本进行类型强制转换
        //NaN：not a number
        var xj=parseInt(tr.cells[3].innerText);
        sum=sum+xj;
    }
    rows[rows.length-1].cells[1].innerText=sum;
}


//当鼠标悬浮的时候，显示背景颜色
function showBGColor(){
    //当前发生的事件
    //event.srcElement:事件源
    //alert(event.srcElement);
    //alert(event.srcElement.tagName);--->TD
    if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
        var td=event.srcElement;
        //获取td的父元素
        var tr=td.parentElement;
        //如果想要通过js来设置某个结点的样式，就需要加上.style
        tr.style.backgroundColor="pink";
        //tr.cells表示获取这个tr中所有的单元格
        var tds=tr.cells;
        for(var i=0;i<tds.length;i++){
            tds[i].style.color="yellow";
        }
    }
}

//当鼠标离开的时候，恢复原始样式
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="gray";
        }
    }
}

//当鼠标悬浮在单价单元格的时候，显示手势
function showHand(){
    if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
        var td=event.srcElement;
        //cursor:光标
        td.style.cursor="hand";

    }
}

weixin_46622498

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】CSS,JS相关

<html><head> <meta charset="utf-8"> <link rel="stylesheet" href="demo01.css"> <script type="text/javascript" src="demo09.js"></script></head><body><div id="div_container"> <div i.
复制链接

扫一扫