Java学习---javascript

一、javascript

js文件

window.onload=function () {
    updateZJ();
   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 cells = tr.cells;
       var priceID = cells[1];
       //绑定鼠标悬浮在单价单元格上
       priceID.onmouseover = showHand;
       //绑定单价单元格的事件
       priceID.onclick=editPrice;
       //绑定删除小图标的单击事件
       var img = cells[4].firstChild;
       if (img && img.tagName=="IMG"){
           //绑定单击事件
           img.onclick = delFruit;
       }

   }
}
function delFruit() {
    if (event && event.srcElement && event.srcElement.tagName == "IMG"){
        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;
        if (priceID.firstChild && priceID.firstChild.nodeType==3){
            //设置或者获取当前节点的文本内容
            var oldPrice = priceID.innerText;
            //设置当前节点的内部HTML
            priceID.innerHTML="<input type='text' size='4'/>";
            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;
      //console.log(kc);
    if (!(kc>=48 && kc<= 57)  ){
        event.returnValue=false;
    }
    if (kc==13){
        event.srcElement.blur();
    }
     // if (!((kc>=48 && kc <=57) || kc==8 || kc==13)){
     //     event.returnValue=false;
     // }
}
function updatePrice() {
    if (event && event.srcElement && event.srcElement.tagName == "INPUT"){
        var input = event.srcElement;
        var newPrice = input.value;
        //input的父节点
        var priceID = input.parentElement;
        priceID.innerText = newPrice;
        //更新当前行的小计的格子的值
        updateXJ(priceID.parentElement);
    }
}
//更新总计
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 = tr.cells[3].innerText;
         sum = sum + parseInt(xj);
     }
     rows[rows.length-1].cells[1].innerText = sum;
}
//更新指定行的小计
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 showBGColor() {
    //event:当前发生的事件
    //event.srcElement:事件源
    // alert(event.srcElement);
    // alert(event.srcElement.tagName)
    if (event && event.srcElement && event.srcElement.tagName == "TD"){
        var td = event.srcElement;
        var tr = td.parentElement;
        tr.style.backgroundColor = "red";
        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";
        }
    }
}
//当鼠标悬浮时在单价上，显示手势
function showHand() {
    if (event && event.srcElement && event.srcElement.tagName == "TD"){
        var td = event.srcElement;
        td.style.cursor="hand";

    }
}

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/hello02.css">
    <script type="text/javascript" src="js/hello01.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 >10</td>
                <td>5</td>
                <td>50</td>
                <td><img src="shanchu.jpg" class="delImg"/></td>
            </tr>
            <tr >
                <td>芒果</td>
                <td >5</td>
                <td>3</td>
                <td>15</td>
                <td><img src="shanchu.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>西瓜</td>
                <td >2</td>
                <td>12</td>
                <td>24</td>
                <td><img src="shanchu.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="4">1000</td>

            </tr>
        </table>
        <div id="add_fruit_div">
           <table>
               <tr>
                   <td>名称:</td>
                   <td><input type="text" id="fname"/></td>
               </tr>
               <tr>
                   <td>单价:</td>
                   <td><input type="text" id="price"/></td>
               </tr>
               <tr>
                   <td>数量:</td>
                   <td><input type="text" id="fcount"/></td>
               </tr>
               <tr>
               <th colspan="2"><input type="button" value="添加"/></th>
                   <th colspan="2"><input type="button" value="重置"/></th>
              </tr>

           </table>
        </div>
    </div>
</div>

</body>
</html>