07.31《jQuery》——4.2购物车

其他 2018-08-01 06:37:01 阅读次数: 0

这个功能室今天的作业，说实话没有完成的很好，功能没有能完全的实现，并且很多的代码冗余也找不到好的解决办法，问题只能先解决到这一步，等到能够较为完美的解决这个功能的时候再来好好改造他。

很多想要用面对对象思想解决的问题，都没有能很好的想到办法，可能还是学习的不够深刻，这几天的简单学习，并没有形成有效的思维模式，之后的学习要多注意这些方面了。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                border: 0px;
                margin: 0px;
            }
            
            body {
                font-size: 16px;
                font-family: "微软雅黑";
            }
            
            #aaa {
                border: 1px solid aliceblue;
                margin: 0px auto;
                text-align: center;
            }
            
            a {
                text-decoration: none;
            }
            
            th {
                border: 1px solid black;
            }
            
            td {
                border: 1px solid black;
            }
            
            input[type="text"] {
                width: 50px;
                background-color: white;
            }
            
            #zongjia {
                text-align: right;
            }
            
            #text_zongjia {
                border: none;
            }
            
            #tianjia {
                background-color: white;
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            $(function() {

                $("#quanxuan").click(function() {

                    if($("#quanxuan").prop("checked") == true) {
                        $("#xuanze1").prop("checked", true);
                        $("#xuanze2").prop("checked", true);
                        $("#xuanze3").prop("checked", true);
                        $("#xuanze4").prop("checked", true);
                    } else {
                        $("#xuanze1").prop("checked", false);
                        $("#xuanze2").prop("checked", false);
                        $("#xuanze3").prop("checked", false);
                        $("#xuanze4").prop("checked", false);
                    }

                    // 全选第1行
                    if($("#xuanze1").prop("checked") == true) {
                        $("#aaa1").attr("href", "#");
                        $("#jian1").removeAttr("disabled");
                        $("#jia1").removeAttr("disabled");
                    } else {
                        $("#aaa1").attr("href", "javascript:void(0) ");
                        $("#jian1").attr("disabled", "disabled");
                        $("#jia1").attr("disabled", "disabled");
                    }
                    $("#jian1").click(function() {
                        if(parseInt($("#text1").val()) > 0) {
                            $("#text1").val(parseInt($("#text1").val()) - 1);
                            $("#zongji1").val(parseInt($("#zongji1").val()) - 23);
                        }
                    });

                    $("#jia1").click(function() {
                        $("#text1").val(parseInt($("#text1").val()) + 1);
                        $("#zongji1").val(parseInt($("#zongji1").val()) + 23);
                    });
                    $("#aaa1").click(function() {
                        $(this).parent().parent().remove();
                    });

                    // 全选第2行
                    if($("#xuanze2").prop("checked") == true) {
                        $("#aaa2").attr("href", "#");
                        $("#jian2").removeAttr("disabled");
                        $("#jia2").removeAttr("disabled");
                    } else {
                        $("#aaa2").attr("href", "javascript:void(0) ");
                        $("#jian2").attr("disabled", "disabled");
                        $("#jia2").attr("disabled", "disabled");
                    }
                    $("#jian2").click(function() {
                        if(parseInt($("#text2").val()) > 0) {
                            $("#text2").val(parseInt($("#text2").val()) - 1);
                            $("#zongji2").val(parseInt($("#zongji2").val()) - 45);
                        }
                    });
                    $("#jia2").click(function() {
                        $("#text2").val(parseInt($("#text2").val()) + 1);
                        $("#zongji2").val(parseInt($("#zongji2").val()) + 45);
                    });
                    $("#aaa2").click(function() {
                        $(this).parent().parent().remove();
                    });

                    // 全选第3行
                    if($("#xuanze3").prop("checked") == true) {
                        $("#aaa3").attr("href", "#");
                        $("#jian3").removeAttr("disabled");
                        $("#jia3").removeAttr("disabled");
                    } else {
                        $("#aaa3").attr("href", "javascript:void(0) ");
                        $("#jian3").attr("disabled", "disabled");
                        $("#jia3").attr("disabled", "disabled");
                    }
                    $("#jian3").click(function() {
                        if(parseInt($("#text3").val()) > 0) {
                            $("#text3").val(parseInt($("#text3").val()) - 1);
                            $("#zongji3").val(parseInt($("#zongji3").val()) - 65);
                        }
                    });
                    $("#jia3").click(function() {
                        $("#text3").val(parseInt($("#text3").val()) + 1);
                        $("#zongji3").val(parseInt($("#zongji3").val()) + 65);
                    });
                    $("#aaa3").click(function() {
                        $(this).parent().parent().remove();
                    });

                    // 全选第4行
                    if($("#xuanze4").prop("checked") == true) {
                        $("#aaa4").attr("href", "#");
                        $("#jian4").removeAttr("disabled");
                        $("#jia4").removeAttr("disabled");
                    } else {
                        $("#aaa4").attr("href", "javascript:void(0) ");
                        $("#jian4").attr("disabled", "disabled");
                        $("#jia4").attr("disabled", "disabled");
                    }
                    $("#jian4").click(function() {
                        if(parseInt($("#text4").val()) > 0) {
                            $("#text4").val(parseInt($("#text4").val()) - 1);
                            $("#zongji4").val(parseInt($("#zongji4").val()) - 10000);
                        }
                    });

                    $("#jia4").click(function() {
                        $("#text4").val(parseInt($("#text4").val()) + 1);
                        $("#zongji4").val(parseInt($("#zongji4").val()) + 10000);
                    });
                    $("#aaa4").click(function() {
                        $(this).parent().parent().remove();
                    })

                });

                $("#xuanze1").bind("click", function() {
                    if($("#xuanze1").prop("checked") == true) {
                        $("#aaa1").attr("href", "#");
                        $("#jian1").removeAttr("disabled");
                        $("#jia1").removeAttr("disabled");
                    } else {
                        $("#aaa1").attr("href", "javascript:void(0) ");
                        $("#jian1").attr("disabled", "disabled");
                        $("#jia1").attr("disabled", "disabled");
                    }
                    $("#jian1").click(function() {
                        if(parseInt($("#text1").val()) > 0) {
                            $("#text1").val(parseInt($("#text1").val()) - 1);
                            $("#zongji1").val(parseInt($("#zongji1").val()) - 23);
                        }
                    });

                    $("#jia1").click(function() {
                        $("#text1").val(parseInt($("#text1").val()) + 1);
                        $("#zongji1").val(parseInt($("#zongji1").val()) + 23);
                    });
                    $("#aaa1").click(function() {
                        $(this).parent().parent().remove();
                    })
                });

                $("#xuanze2").bind("click", function() {
                    if($("#xuanze2").prop("checked") == true) {
                        $("#aaa2").attr("href", "#");
                        $("#jian2").removeAttr("disabled");
                        $("#jia2").removeAttr("disabled");
                    } else {
                        $("#aaa2").attr("href", "javascript:void(0) ");
                        $("#jian2").attr("disabled", "disabled");
                        $("#jia2").attr("disabled", "disabled");
                    }
                    $("#jian2").click(function() {
                        if(parseInt($("#text2").val()) > 0) {
                            $("#text2").val(parseInt($("#text2").val()) - 1);
                            $("#zongji2").val(parseInt($("#zongji2").val()) - 45);
                        }
                    });

                    $("#jia2").click(function() {
                        $("#text2").val(parseInt($("#text2").val()) + 1);
                        $("#zongji2").val(parseInt($("#zongji2").val()) + 45);
                    });
                    $("#aaa2").click(function() {
                        $(this).parent().parent().remove();
                    })
                });

                $("#xuanze3").bind("click", function() {
                    if($("#xuanze3").prop("checked") == true) {
                        $("#aaa3").attr("href", "#");
                        $("#jian3").removeAttr("disabled");
                        $("#jia3").removeAttr("disabled");
                    } else {
                        $("#aaa3").attr("href", "javascript:void(0) ");
                        $("#jian3").attr("disabled", "disabled");
                        $("#jia3").attr("disabled", "disabled");
                    }
                    $("#jian3").click(function() {
                        if(parseInt($("#text3").val()) > 0) {
                            $("#text3").val(parseInt($("#text3").val()) - 1);
                            $("#zongji3").val(parseInt($("#zongji3").val()) - 65);
                        }
                    });

                    $("#jia3").click(function() {
                        $("#text3").val(parseInt($("#text3").val()) + 1);
                        $("#zongji3").val(parseInt($("#zongji3").val()) + 65);
                    });
                    $("#aaa3").click(function() {
                        $(this).parent().parent().remove();
                    })
                });

                $("#xuanze4").bind("click", function() {
                    if($("#xuanze4").prop("checked") == true) {
                        $("#aaa4").attr("href", "#");
                        $("#jian4").removeAttr("disabled");
                        $("#jia4").removeAttr("disabled");
                    } else {
                        $("#aaa4").attr("href", "javascript:void(0) ");
                        $("#jian4").attr("disabled", "disabled");
                        $("#jia4").attr("disabled", "disabled");
                    }
                    $("#jian4").click(function() {
                        if(parseInt($("#text4").val()) > 0) {
                            $("#text4").val(parseInt($("#text4").val()) - 1);
                            $("#zongji4").val(parseInt($("#zongji4").val()) - 10000);
                        }
                    });

                    $("#jia4").click(function() {
                        $("#text4").val(parseInt($("#text4").val()) + 1);
                        $("#zongji4").val(parseInt($("#zongji4").val()) + 10000);
                    });
                    $("#aaa4").click(function() {
                        $(this).parent().parent().remove();
                    })
                });
                
                

            });
        </script>
    </head>

    <body>
        <div>
            <table id="aaa" width="800px">
                <tr>
                    <th><input type="checkbox" name="quanxuan" id="quanxuan" />全选</th>
                    <th>产品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>合计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><input type="checkbox" name="xuanze1" id="xuanze1" /></td>
                    <td>u盘</td>
                    <td>23</td>
                    <td><input type="button" name="jian1" id="jian1" value="-" />
                        <input type="text" name="text1" id="text1" value="1" disabled="disabled" />
                        <input type="button" name="jia1" id="jia1" value="+" />
                    </td>
                    <td><input type="text" name="zongji1" id="zongji1" value="23" disabled="disabled" /></td>
                    <td>
                        <a href="javascript:void(0) " disabled="disabled" id="aaa1">删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="xuanze2" id="xuanze2" /></td>
                    <td>充电器</td>
                    <td>45</td>
                    <td><input type="button" name="jian2" id="jian2" value="-" />
                        <input type="text" name="text2" id="text2" value="1" disabled="disabled" />
                        <input type="button" name="jia2" id="jia2" value="+" />
                    </td>
                    <td><input type="text" name="zongji2" id="zongji2" value="45" disabled="disabled" /></td>
                    <td>
                        <a href="javascript:void(0) " disabled="disabled" id="aaa2">删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="xuanze3" id="xuanze3" /></td>
                    <td>鼠标</td>
                    <td>65</td>
                    <td><input type="button" name="jian3" id="jian3" value="-" />
                        <input type="text" name="text3" id="text3" value="1" disabled="disabled" />
                        <input type="button" name="jia3" id="jia3" value="+" />
                    </td>
                    <td><input type="text" name="zongji3" id="zongji3" value="65" disabled="disabled" /></td>
                    <td>
                        <a href="javascript:void(0) " disabled="disabled" id="aaa3">删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="xuanze4" id="xuanze4" /></td>
                    <td>电脑</td>
                    <td>10000</td>
                    <td><input type="button" name="jian4" id="jian4" value="-" />
                        <input type="text" name="text4" id="text4" value="1" disabled="disabled" />
                        <input type="button" name="jia4" id="jia4" value="+" />
                    </td>
                    <td><input type="text" name="zongji4" id="zongji4" value="10000" disabled="disabled" /></td>
                    <td>
                        <a href="javascript:void(0) " disabled="disabled" id="aaa4">删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="button" name="tianjia" id="tianjia" value="添加" /></td>
                    <td id="zongjia" colspan="5"><input type="button" name="jisuanzongjia" id="jisuanzongjia" value="计算总价：" /><input type="text" name="text_zongjia" id="text_zongjia" value="" /></td>
                </tr>

            </table>
        </div>
    </body>

</html>

猜你喜欢

转载自www.cnblogs.com/justlive-tears/p/9399109.html
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022