js之购物车

时间：2016-10-16 11:59:59 阅读：212 评论：0 收藏：0 [点我收藏+]

标签：

function jian(a){
    var tdob=a.parentNode;
    var childs=tdob.childNodes;
    for(var i=0;i<childs.length;i++){
        var child=childs[i];
        if(child.nodeName=="INPUT" && child.type=="text"){
            var num=parseInt(child.value);
            if( num>0){
                child.value=--num;
            }
        }
    }
        jisuan(); 
}
function jia(btobj){
    var tdob=btobj.parentNode;
    var childs=tdob.childNodes;
    for(var i=0;i<childs.length;i++){
        var child=childs[i];
        if(child.nodeName=="INPUT" && child.type=="text"){
            var num=parseInt(child.value);
            
                child.value=++num;
            
        }
    }
    jisuan(); 
}
function jisuan(){
    var zhongji=0;
    var mytable=document.getElementById("shoppingCart");
    var trs=mytable.getElementsByTagName("tr");
    var trsLength=trs.length;
    for(var i=1;i<trsLength-1;i++){
        var xiaoji=0;
        var currentTds=trs[i].getElementsByTagName("td");
        var price=currentTds[1].innerHTML;
        var numTds=currentTds[2];
        var inputs=numTds.getElementsByTagName("input");
        var num=inputs[1].value;
        xiaoji=parseFloat(num)*parseFloat(price);
        currentTds[4].innerHTML=xiaoji;
        zhongji+=xiaoji;
    }
    mytable.lastElementChild.lastElementChild.lastElementChild.innerHTML=zhongji;
}
function addrow(){
    var goodsname=document.getElementById("shopname").value;
    var goodsprice=document.getElementById("price").value;
    var mytable=document.getElementById("shoppingCart");
    var newrow=mytable.insertRow(mytable.rows.length-1);
    var cell0=newrow.insertCell(0);
    cell0.innerHTML=goodsname;
    var cell1=newrow.insertCell(1);
    cell1.innerHTML=goodsprice;
    var cell2=newrow.insertCell(2);
    cell2.innerHTML="<input type=‘button‘ value=‘-‘ onclick=‘jian(this)‘/> <input type=‘text‘ value=‘1‘ onblur=‘jisuan();‘ disabled=‘disabled‘/> <input type=‘button‘ value=‘+‘ onclick=‘jia(this);‘/>";
    var cell3=newrow.insertCell(3);
    cell3.innerHTML="<td><input type=‘button‘ value=‘删除‘ onclick=‘removerow(this)‘/></td>";
    var cell4=newrow.insertCell(4);
    cell4.innerHTML=goodsprice;
    jisuan();
}
function removerow(a){
    var mytable=document.getElementById("shoppingCart");
    a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
    jisuan();
}

lianxi.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lianxi2.js" ></script>
    </head>
    <body>
        <h2>
        购物车
        </h2>
        <label>商品名称:<input type="text" id="shopname"/></label>
        <label>商品价格:<input type="text" id="price"/></label>
        <input type="button" value="增加" onclick="addrow();" />;
        <table id="shoppingCart" border="1">
            <tr>
                <th>
                    商品名称
                </th>
                <th>
                    价格
                </th>
                <th>
                    数量
                </th>
                <th>
                    操作
                </th>
                <th>
                    小计
                </th>
            </tr>
            <tr>
                <td>book1</td>
                <td>10.00</td>
                <td><input type="button" value="-" onclick="jian(this)"/>
                    <input type="text" value="1" onblur="jisuan();"/>
                    <input type="button" value="+" onclick="jia(this)"/>
                </td>
                <td><input type="button" value="删除" onclick="removerow(this)"/></td>
                <td>10.00</td>
            </tr>
            <tr>
                <td>book2</td>
                <td>5.00</td>
                <td><input type="button" value="-" onclick="jian(this)"/>
                    <input type="text" value="1" onblur="jisuan();"/>
                    <input type="button" value="+" onclick="jia(this);"/>
                </td>
                <td><input type="button" value="删除" onclick="removerow(this)"/></td>
                <td>5.00</td>
            </tr>
            <tr>
                <td>book3</td>
                <td>15.00</td>
                <td><input type="button" value="-" onclick="jian(this)"/>
                    <input type="text" value="1" onblur="jisuan();" disabled="disabled"/>
                    <input type="button" value="+" onclick="jia(this);"/>
                </td>
                <td><input type="button" value="删除" onclick="removerow(this)"/></td>
                <td>15.00</td>
            </tr>
            <tfoot>
                <td colspan="4" align="right">总计</td>
                <td>30.0</td>
            </tfoot>
        </table>
    </body>
</html>

lianxi.html

js之购物车

标签：

原文地址：http://www.cnblogs.com/huangyongyong/p/5966159.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行