JS DOM实现简易购物车

李牧谦

于 2023-12-12 14:36:25 发布

阅读量189

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/V1411/article/details/134948956

版权

素材链接如下：https://wwgr.lanzouw.com/iARlN1hnak1i

body部分如下：

<body>
		<div  class="container">
            <h3>购物车管理</h3>
            <hr size="2px" color="#ababab"/>
		    <div id="shopping">
                <table>
                    <tr>
                        <td><img class="goods" src="images/1.jpg">
                            <button onclick="addGood(1)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/2.jpg">
                            <button onclick="addGood(2)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/3.jpg">
                            <button onclick="addGood(3)">加入购物车</button>
                        </td>
                    </tr>
                </table>
            </div>    
            <hr size="2px" color="#ababab"/>
            <h4>我的购物车</h4>
            <button onclick="clearAll()">清空购物车</button>
            <div id="my">
                购物车中尚无商品。
            </div>
                
		       
		</div>
</body>

效果如下：

注意，有两个函数，Button加入购物车 addGood(n)，清空购物车 clearAll()

js代码如下:


<script>
    var myCart = document.getElementById("my");
    var goodTable = document.createElement("table");
    var count =[0,0,0];
    function addGood(n){ // 添加
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){ // 初始化购物车栏
            myCart.innerHTML="";
            myCart.appendChild(goodTable);
        }
        if(count[n-1]==0){ // 第一次添加
            var good = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            good.setAttribute("id","good"+n);
            td1.innerHTML=
               '<img src="images/'+n+'.jpg" />';
            td2.innerHTML='共<input type="number" value="1" id="num'+n+'"/>件';
            td3.innerHTML = '<input type="button" value="删除" onclick="reduce('+n+')" />';//id=" btn'+n+'"
            good.appendChild(td1);
            good.appendChild(td2);
            good.appendChild(td3);
            goodTable.appendChild(good);
        }
        else{ //多次添加
            var idTd =  "num"+n;
            var tdVar = document.getElementById(idTd);
            tdVar.value = parseInt(tdVar.value)+1;
        }
        count[n-1] = 1;
    }
    function clearAll(){ // 清空
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){alert("当前购物车没有商品");}
        else{
            goodTable.innerHTML="";
            myCart.removeChild(goodTable);
            goodTable.innerHTML="";
            myCart.innerHTML="购物车中尚无商品。";
            count = [0,0,0];
       }
    }
    function reduce(n){ // 减少
        var tdVar = document.getElementById("num"+n);
        var goodVar = document.getElementById("good"+n);
        var num = parseInt(tdVar.value);
        if(num-1==0){ // 最后一个直接删除行
            goodTable.removeChild(goodVar);
            count[n-1] = 0;
        }else{
            tdVar.value = parseInt(tdVar.value)-1;
        }
    }
</script>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业5</title>
    <!-- <link href="css/1.css"/> -->
</head>
<body>
		<div  class="container">
            <h3>购物车管理</h3>
            <hr size="2px" color="#ababab"/>
		    <div id="shopping">
                <table>
                    <tr>
                        <td><img class="goods" src="images/1.jpg">
                            <button onclick="addGood(1)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/2.jpg">
                            <button onclick="addGood(2)">加入购物车</button>
                        </td>
                        <td><img class="goods" src="images/3.jpg">
                            <button onclick="addGood(3)">加入购物车</button>
                        </td>
                    </tr>
                </table>
            </div>    
            <hr size="2px" color="#ababab"/>
            <h4>我的购物车</h4>
            <button onclick="clearAll()">清空购物车</button>
            <div id="my">
                购物车中尚无商品。
            </div>
                
		       
		</div>
</body>

<script>
    var myCart = document.getElementById("my");
    var goodTable = document.createElement("table");
    var count =[0,0,0];
    function addGood(n){ // 添加
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){ // 初始化购物车栏
            myCart.innerHTML="";
            myCart.appendChild(goodTable);
        }
        if(count[n-1]==0){ // 第一次添加
            var good = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            good.setAttribute("id","good"+n);
            td1.innerHTML=
               '<img src="images/'+n+'.jpg" />';
            td2.innerHTML='共<input type="number" value="1" id="num'+n+'"/>件';
            td3.innerHTML = '<input type="button" value="删除" onclick="reduce('+n+')" />';//id=" btn'+n+'"
            good.appendChild(td1);
            good.appendChild(td2);
            good.appendChild(td3);
            goodTable.appendChild(good);
        }
        else{ //多次添加
            var idTd =  "num"+n;
            var tdVar = document.getElementById(idTd);
            tdVar.value = parseInt(tdVar.value)+1;
        }
        count[n-1] = 1;
    }
    function clearAll(){ // 清空
        var trVar = myCart.getElementsByTagName("tr");
        if(trVar.length == 0){alert("当前购物车没有商品");}
        else{
            goodTable.innerHTML="";
            myCart.removeChild(goodTable);
            goodTable.innerHTML="";
            myCart.innerHTML="购物车中尚无商品。";
            count = [0,0,0];
       }
    }
    function reduce(n){ // 减少
        var tdVar = document.getElementById("num"+n);
        var goodVar = document.getElementById("good"+n);
        var num = parseInt(tdVar.value);
        if(num-1==0){ // 最后一个直接删除行
            goodTable.removeChild(goodVar);
            count[n-1] = 0;
        }else{
            tdVar.value = parseInt(tdVar.value)-1;
        }
    }
</script>
</html>