<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("jquery", "1.2.6"); </script> <script type="text/javascript" src="order.js"></script> </head> <body> <table id="order-table"> <tr> <th>Product Name</th> <th>Quantity</th> <th>X</th> <th>Unit Price</th> <th>=</th> <th style="text-align: right;">Totals</th> </tr> <tr class="odd"> <td class="product-title">www.corange.cn<em></em></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="turface-pro-league-num-pallets" > </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>340</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="turface-pro-league-row-total" disabled="disabled"> </input> </td> </tr> <tr class="even"> <td class="product-title"><p>Turface® Pro League Red - <em>Calcined Clay Top Dressinged</em></p> <p> </p></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="turface-pro-league-red-num-pallets"> </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>455</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="turface-pro-league-red-row-total" disabled="disabled"> </input> </td> </tr> <tr class="odd"> <td class="product-title">Turface® Quick Dry - <em>Calcined Clay Moisture Absorbent</em></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="turface-quick-dry-num-pallets" > </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>100</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="turface-quick-dry-row-total" disabled="disabled"> </input> </td> </tr> <tr class="even"> <td class="product-title">Turface® Mound Clay Red - <em>Virgin Red Clay</em></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="turface-mound-clay-red-num-pallets"> </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>40</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="turface-mound-clay-red-row-total" disabled="disabled"> </input> </td> </tr> <tr class="odd"> <td class="product-title">Red Infield Conditioner - <em>Vitrified Clay Top Dressing</em></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="diamond-pro-red-num-pallets" > </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>35</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="diamond-pro-red-row-total" disabled="disabled"> </input> </td> </tr> <tr class="even"> <td class="product-title">Drying Agent - <em>Calcined Clay Moisture Absorbent</em></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="diamond-pro-drying-agent-num-pallets"> </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>340</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="diamond-pro-drying-agent-row-total" disabled="disabled"> </input> </td> </tr> <tr class="odd"> <td class="product-title">Professional - <em>Calcined Clay Top Dressing</em></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="diamond-pro-professional-num-pallets" > </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>75</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="diamond-pro-professional-row-total" disabled="disabled"> </input> </td> </tr> <tr class="even"> <td class="product-title">Top Dressing - <em>Calcined Clay Soil Conditioner</em></td> <td class="num-pallets"> <input type="text" class="num-pallets-input" id="diamond-pro-top-dressing-num-pallets"> </input> </td> <td class="times">X</td> <td class="price-per-pallet">$<span>30</span></td> <td class="equals">=</td> <td class="row-total"> <input type="text" class="row-total-input" id="diamond-pro-top-dressing-row-total" disabled="disabled"> </input> </td> </tr> <tr> <td colspan="6" style="text-align: right;"> Product SUBTOTAL: <input type="text" class="total-box" id="product-subtotal" disabled="disabled"> </input> </td> </tr> </table> </body> </html>
function IsNumeric(sText) { var ValidChars = "0123456789."; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) { Char = sText.charAt(i); if (ValidChars.indexOf(Char) == -1) { IsNumber = false; } } return IsNumber; }; function calcProdSubTotal() { var prodSubTotal = 0; $(".row-total-input").each(function(){ var valString = $(this).val() || 0; prodSubTotal += parseInt(valString); }); $("#product-subtotal").val(prodSubTotal); }; function calcTotalPallets() { var totalPallets = 0; $(".num-pallets-input").each(function() { var thisValue = $(this).val(); if ( (IsNumeric(thisValue)) && (thisValue != '') ) { totalPallets += parseInt(thisValue); }; }); $("#total-pallets-input").val(totalPallets); }; function calcShippingTotal() { var totalPallets = $("#total-pallets-input").val() || 0; var shippingRate = $("#shipping-rate").text() || 0; var shippingTotal = totalPallets * shippingRate; $("#shipping-subtotal").val(shippingTotal); }; function calcOrderTotal() { var orderTotal = 0; var productSubtotal = $("#product-subtotal").val() || 0; var shippingSubtotal = $("#shipping-subtotal").val() || 0; var orderTotal = parseInt(productSubtotal) + parseInt(shippingSubtotal); var orderTotalNice = "$" + orderTotal; $("#order-total").val(orderTotalNice); }; $(function(){ $('.num-pallets-input').blur(function(){ var $this = $(this); var numPallets = $this.val(); var multiplier = $this .parent().parent() .find("td.price-per-pallet span") .text(); if ( (IsNumeric(numPallets)) && (numPallets != '') ) { var rowTotal = numPallets * multiplier; $this .css("background-color", "white") .parent().parent() .find("td.row-total input") .val(rowTotal); } else { $this.css("background-color", "#ffdcdc"); }; calcProdSubTotal(); calcTotalPallets(); calcShippingTotal(); calcOrderTotal(); }); });
相关推荐
6.12 实现可拖放的购物车 6.13 可排序的拖放 6.14 在多个列表之间进行拖放 6.15 使用拖动方式选择多个元素 6.16 在两个Tab标签之间进行元素拖动 6.17 拖动表格选择多行数据 6.18 拖动表格时自动选中复选框 6.19 拖动...
该示例代码是一个基于jQuery实现的简单购物车功能,模拟了淘宝网站前台购物车的部分交互逻辑。主要知识点包括: 1. **事件监听**:通过`$(document).ready()`确保页面加载完成后执行相关JavaScript代码。使用`$...
通过jQuery,开发者可以实现动态更新购物车状态,提供实时反馈给用户。 总结,这份教程以实战任务为引导,覆盖了jQuery的基础知识和常见网页特效的实现,对于初学者和有一定基础的开发者来说,都是极好的学习资源。...
然而,三层架构也存在一定的缺点,如可能会降低系统性能,因为增加了间接调用的层级,同时也可能导致级联修改,即上层的变动会引发下层的修改,增加了代码量和工作量。 在书城项目的实现中,具体三层架构如下: 1. ...
本文档详细阐述了电子商务网站的设计方案,涵盖了关键模块的实现思路和技术方法,旨在为编程人员提供清晰的开发指导,并为软件测试提供参考。 1. **HTML5与CSS3**: HTML5是超文本标记语言的最新版本,它扩展了...
在编程实现过程中,需要搭建开发环境,引入SSH框架所需的配置文件和jar包,配置C3P0连接池、SessionFactory以及事务管理。为了应对高并发,可以考虑使用NIO、多线程同步机制、线程池以及数据库优化策略,如SQL优化、...
在技术实现上,该模板可能运用了CSS3(级联样式表第三版)来定义页面的样式和动画效果,提升视觉吸引力。JavaScript库,如jQuery,可能被用于实现交互功能,如滑动展示、下拉菜单、弹窗提示等。此外,为了提高页面...
为了解决这些问题,开发者需要采用兼容性良好的库或框架,如jQuery、axios等,并合理设计API接口,同时考虑使用JSON替代XML以提高数据传输效率。 **三、为什么使用AJAX** 1. **提高用户体验**:AJAX允许页面局部...
3. **前端技术**: 响应式设计通常依赖于CSS3(级联样式表第3版)和JavaScript库,如Bootstrap或jQuery,以实现灵活的布局和交互效果。这些技术可能会用于创建吸引人的界面,提供滑动效果、下拉菜单、触控友好等功能...
4. **购物车相关功能**:这部分可能包括添加商品到购物车、修改购物车中的商品数量、删除商品、计算总价等操作,可能需要用到session或cookie来存储用户购物车的信息。 5. **在线支付功能**:集成第三方支付平台,...
例如,商品列表可以通过`<ul>`和`<li>`标签进行布局,每个商品的详细信息可以嵌套在`<div>`容器内,图片则使用`<img>`标签,并通过`src`属性指向服务器上的图片资源。 HTML5网站模板通常还包括CSS3(级联样式表)...
在响应式设计中,HTML 通常配合 CSS(级联样式表)和 JavaScript 使用,实现页面的布局调整和交互功能。 【压缩包子文件的文件名称列表】:Mc_pride_premium_meats-main 可能包含项目的源代码文件和资源文件,如 ...
\contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...