JavaScript基础

S1nJa
115 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

JavaScript

JavaScript是一个客户端的脚本语言，它是一个弱类型语言，变量的数据类型由后面赋值类型决定。

HTML调用时需加上：

<script type="text/javascript" src="js/test.js"></script>

鼠标悬浮和离开操作

当鼠标悬浮时，显示背景颜色

function showBGColor(){
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var td = event.srcElement;
         //获取td的父元素 --> TR
        var tr = td.parentElement;
        
        //为节点添加样式，需要加上style
        tr.style.backgroundColor = "navy";
        
        //获取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="black";
        }
    }
}

将定义的事件加到标签上

<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">

此时鼠标悬浮在单元格上时，则会高亮显示，离开后恢复原样

image-20221001163135142.png 鼠标指到单价时，显示手势

function showHand(){
    if(event && event.srcElement && event.srcElement.tagName=="TD") {
        var td = event.srcElement;
        td.style.cursor = "hand";
    }

优化

上边方式需要逐一给单元格嵌套事件，所以下边引出了简便的方式：

window.onload=function (){
    //根据id获取表格
    var tbllist = document.getElementById("tbl_list");
    //获取表格中的所有行
    var rows = tbllist.rows;
    for(var i=0 ; i < rows.length; i++){
        var tr = rows[i];
        //绑定鼠标悬浮设置北京颜色事件
        tr.onmouseover=showBGColor;
        tr.onmouseout = clearBGColor;
        //获取tr这一行的所有单元格
        var cells = tr.cells;
        var priceTD = cells[1];
        priceTD.onmouseover = showHand;
    }
}

练习

实现添加、删除、计算总和等功能

image-20221002145050847.png HTML

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css">
    <script src="js/test.js">
    </script>
</head>
<body>
    <div id="div">
        <div id="div_list">
            <table id="tbl_list">
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>西瓜</td>
                    <td>3</td>
                    <td>20</td>
                    <td>60</td>
                    <td><img src="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>菠萝</td>
                    <td>4</td>
                    <td>25</td>
                    <td>100</td>
                    <td><img src="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>榴莲</td>
                    <td>3</td>
                    <td>30</td>
                    <td>90</td>
                    <td><img src="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">999</td>
                </tr>
            </table>
            <hr/>
            <div id="add_div" >
                <table id="add_tbl">
                    <tr>
                        <td>名称：</td>
                        <td><input type="text" id="tname" class="input" value="apple"></td>
                    </tr>
                    <tr>
                        <td>单价：</td>
                        <td><input type="text" id="price" class="input" value="5"></td>
                    </tr>
                    <tr>
                        <td>数量：</td>
                        <td><input type="text" id="number" class="input" value="100"></td>
                    </tr>
                    <tr>
                        <th colspan="2"><input type="button" id="addbtn" value="添加">
                            <input type="button" id="reset" value="重置">
                        </th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
    background-color: gainsboro;
}
div{
    float: left;
    position: relative;
    background-color: honeydew;
}
#div{
    border: 0px black solid;
    width: 80%;
    height: 100%;
    margin-left: 10%;
}
#div_list{
    width: 100%;
    height: 20%;
}
#tbl_list tr,#tbl_list th,#tbl_list td{
    border: 1px solid gray;
    height: 45px;
    text-align: center;
    font-family: 黑体;
    font-size: 16px;
    font-weight: lighter;
    color: black;
}
#tbl_list{
    width: 50%;
    border-collapse: collapse;
    margin-left: 25%;
    margin-top: 16%;
}
.image{
    width: 20px;
    height: 20px;
    border-radius:8px
​
}
#add_div{
    width: 30%;
    border: 0px solid red;
    margin-left: 35%;
}
#add_tbl{
    margin-left: 10%;
    margin-top: 32px;
    border: 1px solid black;
    width: 80%;
    border-collapse: collapse;
​
}
#add_tbl tr,#add_tbl td,#add_tbl th{
    border: 0px solid black;
    text-align: center;
    line-height: 28px;
}
.input{
    width: 90%;
    padding-left: 5px;
}

JS

function $(tr){
   return  document.getElementById(tr);
}
window.onload=function (){
    updateZJ();
    //根据id获取表格
    var tbllist = $("tbl_list");
    //获取表格中的所有行
    var rows = tbllist.rows;
    for(var i=0 ; i < rows.length-1; i++){
        var tr = rows[i];
        //绑定鼠标悬浮设置北京颜色事件
        tr.onmouseover=showBGColor;
        tr.onmouseout = clearBGColor;
        //获取tr这一行的所有单元格
        var cells = tr.cells;
        var priceTD = cells[1];
        priceTD.onmouseover = showHand;
        // 绑定鼠标点击单价单元格的操作
        priceTD.onclick=editPrice;
        var img = cells[4].firstChild;
        if(img&&img.tagName=="IMG"){
            img.onclick = deltr;
        }
        //回车提交事务
        priceTD.onkeydown=ckInput;
        //点击addbtn按钮添加一行信息
        $("addbtn").onclick=addlist;
    }
}
//添加一行信息
function addlist(){
    var tname = $("tname").value;
    var price = $("price").value;
    var number = $("number").value;
    var xj = price*number;
​
    var tbllist = $("tbl_list");
    var tr = tbllist.insertRow(tbllist.rows.length-1);
    var tnameTD = tr.insertCell();
    tnameTD.innerText = tname;
​
    var priceTD =tr.insertCell();
    priceTD.innerText = price;
​
    var numberId = tr.insertCell();
    numberId.innerText = number;
​
    var xjTD = tr.insertCell();
    xjTD.innerText = xj;
​
    var imgTD = tr.insertCell();
    imgTD.innerHTML = "<img src='imgs/1.jpg' class='image'/>";
    tr.onmouseover=showBGColor;
    tr.onmouseout = clearBGColor;
    //获取tr这一行的所有单元格
    var cells = tr.cells;
    var priceTD = cells[1];
    priceTD.onmouseover = showHand;
    // 绑定鼠标点击单价单元格的操作
    priceTD.onclick=editPrice;
    var img = cells[4].firstChild;
    if(img&&img.tagName=="IMG"){
        img.onclick = deltr;
    }
    //回车提交事务
    priceTD.onkeydown=ckInput;
​
    updateZJ();
}
//删除行
function deltr(){
    if (event && event.srcElement && event.srcElement.tagName == "IMG") {
        if(window.confirm("是否确认删除当前记录")){
            var img = event.srcElement;
            var tr =img.parentElement.parentElement;
            var tablelist = $("tbl_list");
            tablelist.deleteRow(tr.rowIndex);
            updateZJ();
        }
    }
}
//回车提交单价事务
function ckInput(){
    var kc = event.keyCode;
    if(!((kc>=48&&kc<=57)||kc==8 ||kc==13)){
        event.returnValue=false;
    }
    if(kc==13){
        event.srcElement.blur();
    }
}
​
//鼠标单击单元格时进行价格编辑
function editPrice() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var priceTD = event.srcElement;
        //判断当前priceTD是否有子节点，且第一个子节点是否为文本节点，TextNode对应的是3 Element对应的是1
        if (priceTD.firstChild && priceTD.firstChild.nodeType == 3) {
            //innerText表示设置或获取当前节点的内部文本
            var oldPrice = priceTD.innerText;
            //innerHTML表示设置当前节点的内部HTML
            priceTD.innerHTML = "<input type='text' size='4'/>";
            var input = priceTD.firstChild;
            if (input.tagName == "INPUT") {
                input.value = oldPrice;
                //选中输入框文本
                input.select();
                //绑定输入框失去焦点事件，失去焦点，更新价格
                input.onblur = updatePrice;
            }
        }
    }
}
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;
        //更新当前行的小计这一格的值
        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;
        var xj = parseInt(price)*parseInt(count);
        tds[3].innerText = xj;
        updateZJ();
    }
}
​
//更新总计
function updateZJ(){
    var tablelist = $("tbl_list");
    var rows = tablelist.rows;
    var sum=0;
    for (var i=1;i<rows.length-1;i++){
        var tr = rows[i];
        var xj = parseInt(tr.cells[3].innerText)
        sum=sum+xj;
    }
    rows[rows.length-1].cells[1].innerText = sum;
}
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var td = event.srcElement;
        var tr = td.parentElement;
        tr.style.backgroundColor = "navy";
        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="black";
        }
    }
}
​
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
    if(event && event.srcElement && event.srcElement.tagName=="TD") {
        var td = event.srcElement;
        td.style.cursor = "hand";
    }
}
avatar
文章
阅读
粉丝