jquery学习之—构建功能型表单（二）

在构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的表单功能。

然而，有时候表单中的内容也会以数字为主。

当处理作为表单内容的数字值时，也可以实现另外几种表单增强功能。

 

数字表单的典型代表就是购物车。在购物车表单中，应该允许用户更新购买的商品数量，同时，也要为用户提供价格和总金额的数字反馈。

 

构建功能行表单（二）

1.在操作表单前先为表格应用标准的行条纹效果，美化一下表格的外观

Js代码

1. var stripe = function(){   
2.     $("#cart tbody tr:visible:even").removeClass("odd").addClass("even");   
3.     $("#cart tbody tr:visible:odd").removeClass("even").addClass("odd");   
4. }  

var stripe = function(){
    $("#cart tbody tr:visible:even").removeClass("odd").addClass("even");
    $("#cart tbody tr:visible:odd").removeClass("even").addClass("odd");
}

 

2.拒绝非数字输入
通过javascript，可以检查用户输入的内容是否符合我们的要求，以便在将表单发送到服务器之前对用户给出反馈，这种技术叫做输入掩码。
输入验证是根据某些有效输入的标准来检查用户输入的过程。输入掩码会在用户填写内容的同时应用标准，并简单地禁止无效的按键操作。
比如，在这个购物车表单的例子中，必须在输入字段中填写数字。通过使用输入掩码验证，可以在这些字段获得焦点时，让非数字按键操作不起作用

Js代码

1. $(".quantity input").keypress(function(event){   
2.     if(event.charCode && (event.charCode < 48 || event.charCode > 57)){   
3.         event.preventDefault();   
4.     }   
5. });  

$(".quantity input").keypress(function(event){
    if(event.charCode && (event.charCode < 48 || event.charCode > 57)){
        event.preventDefault();
    }
});

在这里我们要观察的是keypress事件，这个事件不提供keyCode属性，但提供了charCode属性。

调用preventDefault()方法会阻止浏览器响应相应的事件。

 

3.数字计算

表单中有个recalculate按钮，单击这个按钮会把表单提交到服务器，重新计算总金额再把表单展示给用户。但是这个往返过程是不必要的，所有工作都可以在浏览器中通过jquery来完成。

在shipping行中显示订购商品的数量。但用户修改了其中一行的数量时，我们要合计所有输入值以得到新的数量，然后将总数显示在相应的单元格中。

Js代码

1. $(".quantity input").change(function(){   
2.     var totalQuantity = 0;   
3.     $("#cart tbody tr").each(function(){   
4.         var quantity = parseInt($(".quantity input",this).val());   
5.         totalQuantity += quantity;   
6.     });   
7.     $(".shipping .quantity").text(String(totalQuantity));   
8. });  

$(".quantity input").change(function(){
	var totalQuantity = 0;
	$("#cart tbody tr").each(function(){
		var quantity = parseInt($(".quantity input",this).val());
		totalQuantity += quantity;
	});
	$(".shipping .quantity").text(String(totalQuantity));
});

我们只有在change事件发生时执行计算。这样，只有当用户离开字段并填写了同以前不一样的值时，才会导致重新计算总数量。

 

a.解析和格式化货币值

Js代码

1. var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));   
2. price = isNaN(price) ? 0 : price;   
3. var cost = quantity * price;   
4. $(".cost",this).text("$"+cost);  

var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));
price = isNaN(price) ? 0 : price;
var cost = quantity * price;
$(".cost",this).text("$"+cost);

 用正则表达式去掉价格前的货币符号，然后把得到的字符传递给parseFloat()，把价格转成浮点数。

我们必须确保找到了数字值，如果没有则将其设置为0。最后，用价格乘以数量，再与$连接放到总费列中

 

b.处理小数位

用toFixed方法返回一个舍入到相应小数位后的浮点数的字符串

 

c.其他计算

1.合计subtotal行最后一列的总费用。

Js代码

1. $(".quantity input").change(function(){   
2.     var totalQuantity = 0;   
3.     var totalCost = 0;   
4.     $("#cart tbody tr").each(function(){   
5.         var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));   
6.         price = isNaN(price) ? 0 : price;   
7.         var quantity = parseInt($(".quantity input",this).val());   
8.         var cost = quantity * price;   
9.         $(".cost",this).text("$"+cost.toFixed(2));   
10.         totalQuantity += quantity;   
11.         totalCost += cost;   
12.     });   
13.     $(".shipping .quantity").text(String(totalQuantity));   
14.     $(".subtotal .cost").text("$" + totalCost.toFixed(2));   
15. });  

$(".quantity input").change(function(){
	var totalQuantity = 0;
	var totalCost = 0;
	$("#cart tbody tr").each(function(){
		var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));
		price = isNaN(price) ? 0 : price;
		var quantity = parseInt($(".quantity input",this).val());
		var cost = quantity * price;
		$(".cost",this).text("$"+cost.toFixed(2));
		totalQuantity += quantity;
		totalCost += cost;
	});
	$(".shipping .quantity").text(String(totalQuantity));
	$(".subtotal .cost").text("$" + totalCost.toFixed(2));
});

 

2.计算税金

为了计算税金，需要用相应的数字除以100得到税率，再用合计金额乘以税率。不过，计算税金时总要向上舍入的，因此必须保证在显示和计算时使用正确的值。

在这里，我们用税金乘以100会使它变成一个以分而不是元表示的值，通过Math.ceil()舍入这个值是安全的。舍入之后，再除以100就可以将这个值转换回以元表示的值。

Js代码

1. var taxRate = parseFloat($(".tax .price").text())/100;   
2. var tax = Math.ceil(totalCost * taxRate * 100)/100;   
3. $(".tax .cost").text("$" + tax.toFixed(2));   
4. totalCost += tax;  

var taxRate = parseFloat($(".tax .price").text())/100;
var tax = Math.ceil(totalCost * taxRate * 100)/100;
$(".tax .cost").text("$" + tax.toFixed(2));
totalCost += tax;

 

3.计算运费

用商品数量乘以单件商品的运输费率就可以得到总运费

Js代码

1. var shippingRate = parseFloat($(".shipping .price").text().replace(/^[^/d.]*/,""));   
2. var shipping = totalQuantity * shippingRate;   
3. $(".shipping .cost").text("$" + shipping.toFixed(2));   
4. totalCost += shipping;  

var shippingRate = parseFloat($(".shipping .price").text().replace(/^[^/d.]*/,""));
var shipping = totalQuantity * shippingRate;
$(".shipping .cost").text("$" + shipping.toFixed(2));
totalCost += shipping;

 

现在我们已经完全重写了可能发生的任何服务器计算。因此，可以安全的隐藏recalculate按钮了

 

4.删除商品

如果购物者在把商品放到购物车中之后改变了注意，可以将相应商品的quantity字段修改为0。然而，我们还可以提供一种更可靠的行为，即为每件商品都添加一个明确的delete按钮。虽然单击这个按钮的实际效果与修改quantity字段相同，但这种视觉上的反馈可以强化不会购买相应商品的事实。

Js代码

1. $("<th>&nbsp;</th>").insertAfter("#cart thead th:nth-child(2)");   
2. $deleteButton = '<img src="images/delete.gif" width="16" height="16" title="remove from cart" alt="remove from cart" class="clickable" />';   
3. $("<td></td>").append($deleteButton).insertAfter("#cart tbody td:nth-child(2)");   
4. $("img.clickable").click(function(){   
5.     $(this).parents("tr").hide().find(".quantity").children("input").val(0).trigger("change");   
6. });   
7. $("<td>&nbsp;</td>").insertAfter("#cart tfoot td:nth-child(2)");  

$("<th>&nbsp;</th>").insertAfter("#cart thead th:nth-child(2)");
$deleteButton = '<img src="images/delete.gif" width="16" height="16" title="remove from cart" alt="remove from cart" class="clickable" />';
$("<td></td>").append($deleteButton).insertAfter("#cart tbody td:nth-child(2)");
$("img.clickable").click(function(){
	$(this).parents("tr").hide().find(".quantity").children("input").val(0).trigger("change");
});
$("<td>&nbsp;</td>").insertAfter("#cart tfoot td:nth-child(2)");

 

 

table.zip (40.1 KB)

 

 

 

转自：http://ice-cream.javaeye.com/blog/326425