这个功能室今天的作业，说实话没有完成的很好，功能没有能完全的实现，并且很多的代码冗余也找不到好的解决办法，问题只能先解决到这一步，等到能够较为完美的解决这个功能的时候再来好好改造他。
很多想要用面对对象思想解决的问题，都没有能很好的想到办法，可能还是学习的不够深刻，这几天的简单学习，并没有形成有效的思维模式，之后的学习要多注意这些方面了。
<!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>