jquery实现 购物车 信息 级联改变

于 2013-08-17 11:32:00 发布
阅读量148 收藏
点赞数
文章标签： javascript xhtml java ViewUI
Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
  5. <title>jQuery</title>
  6. <linkrel="stylesheet"type="text/css"href="style.css"/>
  7. <scriptsrc="http://www.google.com/jsapi"type="text/javascript"></script>
  8. <scripttype="text/javascript">
  9. google.load("jquery","1.2.6");
  10. </script>
  11. <scripttype="text/javascript"src="order.js"></script>
  12. </head>
  13. <body>
  14. <tableid="order-table">
  15. <tr>
  16. <th>ProductName</th>
  17. <th>Quantity</th>
  18. <th>X</th>
  19. <th>UnitPrice</th>
  20. <th>=</th>
  21. <thstyle="text-align:right;">Totals</th>
  22. </tr>
  23. <trclass="odd">
  24. <tdclass="product-title">www.corange.cn<em></em></td>
  25. <tdclass="num-pallets">
  26. <inputtype="text"class="num-pallets-input"id="turface-pro-league-num-pallets">
  27. </input>
  28. </td>
  29. <tdclass="times">X</td>
  30. <tdclass="price-per-pallet">$<span>340</span></td>
  31. <tdclass="equals">=</td>
  32. <tdclass="row-total">
  33. <inputtype="text"class="row-total-input"id="turface-pro-league-row-total"disabled="disabled">
  34. </input>
  35. </td>
  36. </tr>
  37. <trclass="even">
  38. <tdclass="product-title"><p>Turface&reg;ProLeagueRed-<em>CalcinedClayTopDressinged</em></p>
  39. <p>&nbsp;</p></td>
  40. <tdclass="num-pallets">
  41. <inputtype="text"class="num-pallets-input"id="turface-pro-league-red-num-pallets">
  42. </input>
  43. </td>
  44. <tdclass="times">X</td>
  45. <tdclass="price-per-pallet">$<span>455</span></td>
  46. <tdclass="equals">=</td>
  47. <tdclass="row-total">
  48. <inputtype="text"class="row-total-input"id="turface-pro-league-red-row-total"disabled="disabled">
  49. </input>
  50. </td>
  51. </tr>
  52. <trclass="odd">
  53. <tdclass="product-title">Turface&reg;QuickDry-<em>CalcinedClayMoistureAbsorbent</em></td>
  54. <tdclass="num-pallets">
  55. <inputtype="text"class="num-pallets-input"id="turface-quick-dry-num-pallets">
  56. </input>
  57. </td>
  58. <tdclass="times">X</td>
  59. <tdclass="price-per-pallet">$<span>100</span></td>
  60. <tdclass="equals">=</td>
  61. <tdclass="row-total">
  62. <inputtype="text"class="row-total-input"id="turface-quick-dry-row-total"disabled="disabled">
  63. </input>
  64. </td>
  65. </tr>
  66. <trclass="even">
  67. <tdclass="product-title">Turface&reg;MoundClayRed-<em>VirginRedClay</em></td>
  68. <tdclass="num-pallets">
  69. <inputtype="text"class="num-pallets-input"id="turface-mound-clay-red-num-pallets">
  70. </input>
  71. </td>
  72. <tdclass="times">X</td>
  73. <tdclass="price-per-pallet">$<span>40</span></td>
  74. <tdclass="equals">=</td>
  75. <tdclass="row-total">
  76. <inputtype="text"class="row-total-input"id="turface-mound-clay-red-row-total"disabled="disabled">
  77. </input>
  78. </td>
  79. </tr>
  80. <trclass="odd">
  81. <tdclass="product-title">RedInfieldConditioner-<em>VitrifiedClayTopDressing</em></td>
  82. <tdclass="num-pallets">
  83. <inputtype="text"class="num-pallets-input"id="diamond-pro-red-num-pallets">
  84. </input>
  85. </td>
  86. <tdclass="times">X</td>
  87. <tdclass="price-per-pallet">$<span>35</span></td>
  88. <tdclass="equals">=</td>
  89. <tdclass="row-total">
  90. <inputtype="text"class="row-total-input"id="diamond-pro-red-row-total"disabled="disabled">
  91. </input>
  92. </td>
  93. </tr>
  94. <trclass="even">
  95. <tdclass="product-title">DryingAgent-<em>CalcinedClayMoistureAbsorbent</em></td>
  96. <tdclass="num-pallets">
  97. <inputtype="text"class="num-pallets-input"id="diamond-pro-drying-agent-num-pallets">
  98. </input>
  99. </td>
  100. <tdclass="times">X</td>
  101. <tdclass="price-per-pallet">$<span>340</span></td>
  102. <tdclass="equals">=</td>
  103. <tdclass="row-total">
  104. <inputtype="text"class="row-total-input"id="diamond-pro-drying-agent-row-total"disabled="disabled">
  105. </input>
  106. </td>
  107. </tr>
  108. <trclass="odd">
  109. <tdclass="product-title">Professional-<em>CalcinedClayTopDressing</em></td>
  110. <tdclass="num-pallets">
  111. <inputtype="text"class="num-pallets-input"id="diamond-pro-professional-num-pallets">
  112. </input>
  113. </td>
  114. <tdclass="times">X</td>
  115. <tdclass="price-per-pallet">$<span>75</span></td>
  116. <tdclass="equals">=</td>
  117. <tdclass="row-total">
  118. <inputtype="text"class="row-total-input"id="diamond-pro-professional-row-total"disabled="disabled">
  119. </input>
  120. </td>
  121. </tr>
  122. <trclass="even">
  123. <tdclass="product-title">TopDressing-<em>CalcinedClaySoilConditioner</em></td>
  124. <tdclass="num-pallets">
  125. <inputtype="text"class="num-pallets-input"id="diamond-pro-top-dressing-num-pallets">
  126. </input>
  127. </td>
  128. <tdclass="times">X</td>
  129. <tdclass="price-per-pallet">$<span>30</span></td>
  130. <tdclass="equals">=</td>
  131. <tdclass="row-total">
  132. <inputtype="text"class="row-total-input"id="diamond-pro-top-dressing-row-total"disabled="disabled">
  133. </input>
  134. </td>
  135. </tr>
  136. <tr>
  137. <tdcolspan="6"style="text-align:right;">ProductSUBTOTAL:
  138. <inputtype="text"class="total-box"id="product-subtotal"disabled="disabled">
  139. </input>
  140. </td>
  141. </tr>
  142. </table>
  143. </body>
  144. </html>

Java代码 收藏代码
  1. functionIsNumeric(sText)
  3. {
  4. varValidChars="0123456789.";
  5. varIsNumber=true;
  6. varChar;
  9. for(i=0;i<sText.length&&IsNumber==true;i++)
  10. {
  11. Char=sText.charAt(i);
  12. if(ValidChars.indexOf(Char)==-1)
  13. {
  14. IsNumber=false;
  15. }
  16. }
  17. returnIsNumber;
  19. };
  21. functioncalcProdSubTotal(){
  23. varprodSubTotal=0;
  25. $(".row-total-input").each(function(){
  27. varvalString=$(this).val()||0;
  29. prodSubTotal+=parseInt(valString);
  31. });
  33. $("#product-subtotal").val(prodSubTotal);
  35. };
  37. functioncalcTotalPallets(){
  39. vartotalPallets=0;
  41. $(".num-pallets-input").each(function(){
  43. varthisValue=$(this).val();
  45. if((IsNumeric(thisValue))&&(thisValue!='')){
  47. totalPallets+=parseInt(thisValue);
  49. };
  51. });
  53. $("#total-pallets-input").val(totalPallets);
  55. };
  57. functioncalcShippingTotal(){
  59. vartotalPallets=$("#total-pallets-input").val()||0;
  60. varshippingRate=$("#shipping-rate").text()||0;
  61. varshippingTotal=totalPallets*shippingRate;
  63. $("#shipping-subtotal").val(shippingTotal);
  65. };
  67. functioncalcOrderTotal(){
  69. varorderTotal=0;
  71. varproductSubtotal=$("#product-subtotal").val()||0;
  72. varshippingSubtotal=$("#shipping-subtotal").val()||0;
  74. varorderTotal=parseInt(productSubtotal)+parseInt(shippingSubtotal);
  75. varorderTotalNice="$"+orderTotal;
  77. $("#order-total").val(orderTotalNice);
  79. };
  81. $(function(){
  83. $('.num-pallets-input').blur(function(){
  85. var$this=$(this);
  87. varnumPallets=$this.val();
  88. varmultiplier=$this
  89. .parent().parent()
  90. .find("td.price-per-palletspan")
  91. .text();
  93. if((IsNumeric(numPallets))&&(numPallets!='')){
  95. varrowTotal=numPallets*multiplier;
  97. $this
  98. .css("background-color","white")
  99. .parent().parent()
  100. .find("td.row-totalinput")
  101. .val(rowTotal);
  103. }else{
  105. $this.css("background-color","#ffdcdc");
  107. };
  109. calcProdSubTotal();
  110. calcTotalPallets();
  111. calcShippingTotal();
  112. calcOrderTotal();
  114. });
  116. });

iteye_19603
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值