js


<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/1.css">
    <script type="text/javascript" src="js/1.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="images/del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>西瓜</td>
                <td onmouseover="showHand()">3</td>
                <td>20</td>
                <td>60</td>
                <td><img src="images/del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>菠萝</td>
                <td onmouseover="showHand()">4</td>
                <td>25</td>
                <td>100</td>
                <td><img src="images/del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>榴莲</td>
                <td onmouseover="showHand()">3</td>
                <td>30</td>
                <td>90</td>
                <td><img src="images/del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="4">999</td>
            </tr>
        </table>
        <hr/>
        <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>
                    <td><input  aria-colspan="2" type="button"  value="添加">
                        <input  aria-colspan="2" type="button"  value="重填">
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>

//当鼠标悬浮的时候 显示背景颜色
window.onload = function () {
    var fruit = document.getElementById("tbl_fruit");
    var rows = fruit.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 priceTD = cells[1];
        priceTD.onmouseover = showHand;
        //3.绑定鼠标点击 单价单元格的事件
        priceTD.onclick = editPrice;

        //7.
        var img = cells[4].firstChild
        if (img && img.tagName== "IMG"){
            img.onclick = delFruit;
        }
        //8.
        input.onkeydown = ckiInput;
    }
    var table = document.getElementById("add_fruit_div");
    var rows1 = table.rows;
    for (var i = 1; i < rows1.length-1; i++) {
        var tr1 = rows1[i];
        tr.onclick
    }
}
//检验键盘摁下时的方法
function ckiInput() {
    var kc = event.keyCode;
    if (((kc >= 48 && kc <= 57)|| kc ==8|| kc ==13) ){
        event.returnValue = false;
    }
    if (kc == 13 ){
        event.srcElement.blur();
    }


}
function delFruit() {
    if (event && event.srcElement&& event.srcElement.tagName == "IMG"){
        if(window.confirm("是否确认删除当前库存记录")) {
            var img = event.srcElement;
            var tr = img.parentElement;
            var fruiTb1 = document.getElementById("tbl_fruit");
            fruiTb1.deleteRow(tr.rowInex);
            updateZJ();
        }
    }

}
function editPrice() {
    if (event && event.srcElement && event.srcElement.tagName == "TD"){
        var priceId = event.srcElement;
        var oldprice = priceId.innerText
        //innerHTML  表示设置当前节点的内部html
        priceId.innerHTML = "<input type ='text'szie = '2'/>'"
        var input = priceId.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;
        var priceID = input.parentElement;
        priceID.innerText = newPrice;

        updateXJ(priceID.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 fruittb1 = document.getElementById("tbl_fruit");
    var rows  = fruittb1.rows;
    var sum = 0;
    for (let 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() {
    //event ：当前发生的事件
    // 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.background = "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 = "threeddarkshadow";
        }
    }

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

        td.style.backgroundColor = "hand";
    }

}

*{
    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;
}