实现购物车结算功能：批量/全部删除，全选，单价/总价，数量增减，页面隐藏/显示

最新推荐文章于 2024-06-05 20:55:01 发布

gh323093

最新推荐文章于 2024-06-05 20:55:01 发布

阅读量4.7k

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78593032

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .mouse_color{
            background-color: #cccccc;
        }
        .num{
            width: 50px;
        }
        a{
            text-decoration: none;
        }
        #btn1,#btn2{
            color:white;
            width: 100px;
            float: right;
            border: solid red;
            margin-right: 88px;
            background-color: #ff3b30;
        }
    </style>
    <script src="../jquery-1.11.1/jquery-2.1.0.js"></script>
    <script src="../angular-1.5.5/angular.js"></script>
    <script type="text/javascript">
        $(function () {
            // 鼠标移到行的颜色:光标在表格上移动，当前行变色；( mousemove或mouseover )
            $("#tab tr").mouseover(function () {
                $(this).addClass("mouse_color");
            });
            // 鼠标移出行的颜色:离开当前行，颜色恢复
            $("#tab tr").mouseout(function () {
                $(this).removeClass("mouse_color");
            });
        });
    </script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            //1. 声明数据对象，初始化商品信息，数据自拟且不低于四条
            $scope.Products = [
                {
 name:"qq",price:12.90,number:1,totalPrice:12.90,state:false},
                {
 name:"wx",price:23.90,number:1,totalPrice:23.90,state:false},
                {
 name:"cn",price:99.90,number:1,totalPrice:99.90,state:false},
                {
 name:"us",price:2.90,number:1,totalPrice:2.90,state:false},
                {
 name:"jp",price:0.90,number:1,totalPrice:0.90,state:false}
            ];
            //2. 减少数量函数

最低0.47元/天解锁文章

gh323093

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
实现购物车结算功能：批量/全部删除，全选，单价/总价，数量增减，页面隐藏/显示

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .mouse_color{ background-color: #cccccc; } .num{
复制链接

扫一扫