jQuery利用数组Sort获得input最小值

wangxiao5530

浏览: 136857 次
性别:
来自: 大连

最近访客更多访客>>

wangqibao198374

sb12345

lixinyang823

jiwenfengtiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

页面效果如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/WX_TEST/js/jquery-1.4.3.min.js"></script>
<title>Insert title here</title>
<style>
	#tbList input {width:90%;}
	th,td {padding-left:6px;padding-right:6px;padding-top:3px;padding-bottom:3px;;text-align:center}
	.calTr {background:cornsilk}
</style>
</head>
<body >
	<div style="position:relative;width:300px" >
		<div style="text-align:right;margin-bottom:8px;margin-right:15px">
			<input type="button" name="btnAdd" id="btnAdd" value="添加">
		</div>
		<div>
			<table id="tbList" border="1" cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>No</th>
						<th>Item</th>
						<th>Price</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>材料费用</td>
						<td><input type="text" name="ipt" value="2.51"></td>
					</tr>
					<tr>
						<td>2</td>
						<td>人工费用</td>
						<td><input type="text" name="ipt" value="3.3"></td>
					</tr>
				</tbody>
				<tfoot>
					<tr class="calTr">
						<td colspan="2">Min</td>
						<td><input type="text" name="iptMin" id="iptMin" readonly ></td>
					</tr>
					<tr class="calTr">
						<td colspan="2">Max</td>
						<td><input type="text" name="iptMax" id="iptMax" readonly ></td>
					</tr>
					<tr class="calTr">
						<td colspan="2">Sum</td>
						<td><input type="text" name="iptSum" id="iptSum" readonly ></td>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>
</body>
</html>

<script>

	$(function(){
		// 页面Load时计算
		calPrice();
	});
	
	function calPrice(){
		var strSum = 0.00;
		var arrAll = new Array();
		$("input[name=ipt]").each(function(){
			if($(this).val() != ""){
				// isNaN判断输入是否为数字
				if(!isNaN($(this).val())){
					// 将输入值放入数组中
					arrAll.push($(this).val());
					// 计算合计值    (parseFloat转换数据类型)
					strSum += parseFloat($(this).val());
				}else{
					alert("请输入数字!");
					$(this).val("").focus();
					return;
				};
			}
		});
		
		// 数组从小到大排序
		arrAll = arrAll.sort(function(a,b){return a-b;});
		
		// 计算最小值
		$("#iptMin").val(arrAll[0]);
		// 计算最大值
		$("#iptMax").val(arrAll[arrAll.length-1]);
		// 计算合计值
		$("#iptSum").val(strSum);
	}
	
	// 添加行
	$("#btnAdd").click(function(){
		var len = Number($("tbody tr").size()) + 1;
		var newTr = $("<tr>");
		newTr.append($("	<td>" + len + "</td>"));
		newTr.append($("	<td><input type='text' name='item' value='费用' style='width:60px'></td>"));
		newTr.append($("	<td><input type='text' name='ipt'  onkeyup='calPrice()' style='width:60%'><input type='button' name='btnDel' value='删除' onclick='delPrice(this)' style='width:50px'></td>"));
		newTr.append($("</tr>"));
		
		// 将新添加行追加到tbody最后一行后
		$("tbody tr:last").after(newTr);
	});
	
	// 触发keyup事件
	$("input[name=ipt]").keyup(function(){
		calPrice();
	});
	
	// 删除行
	function delPrice(obj){
		$(obj).parent().parent().remove();
		calPrice();
	}
	
</script>