3.Java Web之JavaScript实战

导入代码（链接：https://pan.baidu.com/s/17v_dnXJTmo7QvFm-H58vaA 提取码：71wk）

1.JavaScrip实战1

鼠标悬浮和离开的效果设置

1）当鼠标悬浮时，显示背景颜色
在demon07.js中添加代码

//当鼠标悬浮时，显示背景颜色
function showBGColor(){
    //event：当前发生的事件
    //event.srcElement：事件源
    // alert(event.srcElement);
    // alert(event.srcElement.tagName);
    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 = "navy";
        //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="threeddarkshadow";
        }
    }
}

在tr标签上添加
οnmοuseοver=“showBGColor()” οnmοuseοut=“clearBGColor()”
如：

2）当鼠标悬浮在单元格时，显示手势
在demon07.js中添加代码

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

在需要添加效果的td标签处添加代码：οnmοuseοver=“showHand()”

3）优化
删除html中的
οnmοuseοver=“showBGColor()” οnmοuseοut=“clearBGColor()”
和
οnmοuseοver=“showHand()”

在js文件中添加

window.onload = function(){
    //当也变加载完成，绑定各种事件
    //根据id获取到表格
    var fruitTbl = document.getElementById("tbl_fruit");
    //获取表格中的所有的行
    var rows = fruitTbl.rows;
    for(var i = 0;i < rows.length;i++){
        var tr = rows[i];
        //1.绑定鼠标悬浮设置及离开时的背景颜色事件
        tr.onmouseover=showBGColor;
        tr.onmouseout=clearBGColor;
        //获取tr这一行的所有单元格
        var cells = tr.cells;
        var priceTD = cells[1];
        //绑定鼠标悬浮在担架单元格变手势的时间
        priceTD.onmouseover=showHand;
    }
}

2.JavaScrip实战2

更新单价

修改js

window.onload = function(){
    updateZJ();
    //当也变加载完成，绑定各种事件
    //根据id获取到表格
    var fruitTbl = document.getElementById("tbl_fruit");
    //获取表格中的所有的行
    var rows = fruitTbl.rows;
    for(var i = 0;i < rows.length-1;i++){
        var tr = rows[i];
        //1.绑定鼠标悬浮设置及离开时的背景颜色事件
        tr.onmouseover=showBGColor;
        tr.onmouseout=clearBGColor;
        //获取tr这一行的所有单元格
        var cells = tr.cells;
        var priceTD = cells[1];
        //绑定鼠标悬浮在担架单元格变手势的时间
        priceTD.onmouseover=showHand;
        //3.绑定鼠标断点击单价单元格的事件
        priceTD.onclick=editPrice;
    }
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
    if(event && event.srcElement && event.srcElement.tagName=='TD'){
        var priceTD = event.srcElement;
        //目的是判断当前priceTD有子节点，且第一个子节点是文本节点，TextNode对应的是3，ElementNode对应的是1
        if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
            //innerText表示设置或者获取当前节点的内部文本
            var oldPrice = priceTD.innerText;
            //innerHTML表示设置当前节点的内部HTML
            priceTD.innerHTML="";
            //
            var input = priceTD.firstChild;
            if(input.tagName=="INPUT"){
                input.value = oldPrice;
                //选中输入框内部的文本
                input.select();
                //4.绑定输入框失去焦点事件，失去焦点，更新单价
                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;

        //更新当前行的小计这一个格子的值
        //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);
        tds[3].innerText = xj;

        //更新总计
        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]; 
        var xj = parseInt(tr.cells[3].innerText);

        sum = sum + xj;
    }
    rows[rows.length-1].cells[1].innerText = sum;
}

3.JavaScrip实战3

删除指定的行

window.onload = function(){
    updateZJ();
    //当也变加载完成，绑定各种事件
    //根据id获取到表格
    var fruitTbl = document.getElementById("tbl_fruit");
    //获取表格中的所有的行
    var rows = fruitTbl.rows;
    for(var i = 0;i < rows.length-1;i++){
        var tr = rows[i];
        //1.绑定鼠标悬浮设置及离开时的背景颜色事件
        tr.onmouseover=showBGColor;
        tr.onmouseout=clearBGColor;
        //获取tr这一行的所有单元格
        var cells = tr.cells;
        var priceTD = cells[1];
        //绑定鼠标悬浮在担架单元格变手势的时间
        priceTD.onmouseover=showHand;
        //3.绑定鼠标断点击单价单元格的事件
        priceTD.onclick=editPrice;

        //7.绑定删除小图标的点击事件
        var img = cells[4].firstChild;
        if(img && img.tagName=="IMG"){
            //绑定点击事件
            img.onclick=delFruit;
        }
    }
}
//删除行
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();
        }
    }
}

控制键盘的输入
修改js

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
    if(event && event.srcElement && event.srcElement.tagName=='TD'){
        var priceTD = event.srcElement;
        //目的是判断当前priceTD有子节点，且第一个子节点是文本节点，TextNode对应的是3，ElementNode对应的是1
        if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
            //innerText表示设置或者获取当前节点的内部文本
            var oldPrice = priceTD.innerText;
            //innerHTML表示设置当前节点的内部HTML
            priceTD.innerHTML="";
            //
            var input = priceTD.firstChild;
            if(input.tagName=="INPUT"){
                input.value = oldPrice;
                //选中输入框内部的文本
                input.select();
                //4.绑定输入框失去焦点事件，失去焦点，更新单价
                input.onblur=updatePrice;

                //8.在输入框上绑定键盘按下的事件，此处我们需要保证用户输入的是数字
                input.onkeydown=ckInput;
            }
        }
    }
}
//检验键盘摁下的方法
function ckInput(){
    var kc = event.keyCode;
    //0~9: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();
    }
}

3.Java Web之JavaScript实战

Java相关栏目本月热门文章