jQuery 和DOM 实现的简易购物车

  • 注意:请自动忽略css,实在是太丑了 ? ? ?
  • 使用 jQuery 实现的购物车,代码量要小于DOM版,开发效率更高
1、DOM版
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM版我的购物车</title>
    <style>
        #tb{
            border:1px solid #000;
            width: 750px;
            border-collapse: collapse;
        }
        #tb td{
           border:1px solid #000;
        }
    </style>
</head>
<body>
    <p>
        <input type="text" placeholder="商品名称" id="goodsName">
        <input type="text" placeholder="商品价格" id="goodsPrice">
        <input type="text" placeholder="商品数量" id="goodsNum">
        <button onclick="buttonAdd()">增加</button>
    </p>
    <table id="tb">
        <thead>
            <tr>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>操作</td>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        function buttonAdd() {
            var goodsName = $("goodsName").value;
            var goodsPrice = $("goodsPrice").value;
            var goodsNum = $("goodsNum").value;

            var tdGoodsName = document.createElement("td");
            tdGoodsName.innerHTML = goodsName;
            var tdGoodsPrice = document.createElement("td");
            tdGoodsPrice.innerHTML = goodsPrice;
            var tdGoodsNum = document.createElement("td");
            tdGoodsNum.innerHTML = goodsNum;
            var tdOperation = document.createElement("td");
            var buttonDel = document.createElement("button");
            buttonDel.innerHTML = "删除";
            buttonDel.onclick = function () {
                if(confirm("确定删除")){
                    $("tbody").removeChild(this.parentNode.parentNode);
                }
            };
            var buttonUpdate = document.createElement("button");
            buttonUpdate.innerHTML = "修改";
            buttonUpdate.onclick = function(){
                var goodsNumTd = this.parentNode.previousSibling;
                var goodsNum = goodsNumTd.innerHTML;
                if(this.innerHTML == "修改"){
                    this.innerHTML = "确定";
                    var td = this.parentNode.previousElementSibling;
                    var text = "";
                    var btnRedu = "";
                    var btnAdd = "";
                    td.innerHTML = btnRedu + text + btnAdd;
                    $("btnRedu").onclick = function(){
                        var textNode = this.nextElementSibling;
                        if(parseInt(textNode.value) > 1){
                            textNode.value = parseInt(textNode.value) - 1;
                        }else {
                           textNode.value = 1;
                        }
                    };
                    $("btnAdd").onclick = function(){
                        var textNode = this.previousElementSibling;
                        if(parseInt(textNode.value) >= 1){
                            textNode.value = parseInt(textNode.value) + 1;
                        }else {
                           textNode.value = 1;
                        }
                    }
                }else if(this.innerHTML == "确定"){
                    this.innerHTML = "修改";
                    var td = this.parentNode.previousElementSibling;
                    var changedNum = td.children;
                    var num = changedNum[1].value;
                    td.innerHTML = num;
                }
            };
            tdOperation.appendChild(buttonUpdate);
            tdOperation.appendChild(buttonDel);

            var tr =  document.createElement("tr");
            tr.appendChild(tdGoodsName);
            tr.appendChild(tdGoodsPrice);
            tr.appendChild(tdGoodsNum);
            tr.appendChild(tdOperation);

            $("tbody").appendChild(tr);
        }
    </script>
</body>
</html>
2、jQuery版
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery版我的购物车</title>
    <script src="jquery-2.1.1.js"></script>
    <style>
        #tab{
            border:1px solid #000;
            width: 750px;
            border-collapse: collapse;
        }
        #tab td{
           border:1px solid #000;
        }
    </style>
</head>
<body>
    <p>
        <input type="text", placeholder="商品名称", id="goodsName">
        <input type="text", placeholder="商品价格", id="goodsPrice">
        <input type="text", placeholder="商品数量", id="goodsNum">
        <button id="btn">添加</button>
    </p>
    <p>
        <table id="tab">
            <thead>
                <tr>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
    </p>
    <script>
        $(function () {
            $("#btn").click(function () {
                var $goodsName = $("");
                var goodsName = $("#goodsName").val();
                $goodsName.html(goodsName);

                var $goodsPrice = $("");
                var goodsPrice = $("#goodsPrice").val();
                $goodsPrice.html(goodsPrice);

                var $goodsNum = $("");
                var goodsNum = $("#goodsNum").val();
                $goodsNum.html(goodsNum);

                var $goodsOpt = $("");
                var $delBtn = $("");
                var $updataBtn = $("");
                $delBtn.html("删除");
                $updataBtn.html("修改");
                $goodsOpt.append($delBtn);
                $goodsOpt.append($updataBtn);
                
                $delBtn.click(function () {
                    $(this).parent().parent().remove();
                });

                $updataBtn.click(function () {
                    if($(this).html() == "修改"){
                        $(this).html("确定");
                        var $gNumInput = $("");
                        var $btnAdd = $("");
                        var $btnRedu = $("");
                        var gNum = $(this).parent().prev().html();
                        $(this).parent().prev().empty();
                        $gNumInput.val(gNum);
                        $(this).parent().prev().append($btnAdd);
                        $(this).parent().prev().append($gNumInput);
                        $(this).parent().prev().append($btnRedu);

                        $btnAdd.click(function () {
                            var gNum = $(this).next().val();
                            if (gNum > 0){
                                $(this).next().val(++gNum);
                            }else if (gNum <=0){
                                $(this).next().val(1);
                            }
                        });

                        $btnRedu.click(function () {
                            var gNum = $(this).prev().val();
                            if (gNum > 1){
                                $(this).prev().val(--gNum);
                            }else if (gNum <= 1){
                                $(this).prev().val(1);
                            }
                        });
                    } else if($(this).html() == "确定"){
                        $(this).html("修改");
                        var updateNum = $(this).parent().prev().children("input").val();
                        if (updateNum > 0){
                            $(this).parent().prev().html(updateNum);
                        } else if (updateNum < 0) {
                            $(this).parent().prev().html(1);
                        } else if (updateNum == 0){
                            $(this).parent().parent().remove();
                        }
                    }
                });

                var $tr = $("");
                $tr.append($goodsName);
                $tr.append($goodsPrice);
                $tr.append($goodsNum);
                $tr.append($goodsOpt);
                $("#tbody").append($tr);
            })
        })
    </script>
</body>
</html>

你可能感兴趣的:(jQuery,DOM,jQuery)