jQuery简单实现购物车添加删除操作

最新推荐文章于 2024-03-27 08:45:46 发布

Wonf

最新推荐文章于 2024-03-27 08:45:46 发布

阅读量1w

点赞数 2

分类专栏： HTML 文章标签： jquery 购物车

本文链接：https://blog.csdn.net/wushuang3625/article/details/61671555

版权

HTML 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

注：示例仅是简单实现，只写body部分内容，未对jQuery文件进行导入。

//
<body>
      <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td><label><input type='checkbox'/>全选</label></td>
            <td>商品信息</td>
            <td>单价</td>
            <td>数量</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type='checkbox'/></td>
            <td>电脑</td>
            <td>5000</td>
            <td><input type='text' value='1'></td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
    <button>点击新增</button>
    <script>
        $("button").click(function(){
            // 声明变量，存储新增行，变量中全用单引号，方便拼接。（必须放在单击事件内，否则只能生成一次）
            var newnode=$(
                    "<tr>"+
                    "<td><input type='checkbox'/></td>"+
                    "<td>电视</td>"+
                    "<td>3000</td>"+
                    "<td><input type='text' value='1'></td>"+
                    "<td><a href='#'>删除</a></td>"+
                    "</tr>"
            );
            // 新增节点
            $("table").append(newnode)
        });
        // 使用事业委托，删除节点
        $("table").on("click","a",function(){
            $(this).parents("tr").remove();
        })
    </script>
 </body>