自己写的jquery报价计算器
很简单的，只是乘法。修改每个<input type="text" class="input" cheng=35.4> 中cheng的属性即可<!doctype html><html>
<head>
<meta charset="utf-8">
<title>天十装饰装修报价DIY计算器</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0; color:#555555;}
.jsq{ width:500px; margin:0 auto; padding:20px;}
.jsq h2{ font-size:16px; margin:22px 0;}
table{ background:#D3D3D3;}
td{ background:#FFFFFF; padding:8px;font-size:12px;}
td input{ width:50px; height:19px; line-height:19px; border:1px solid #C5C5C5;}
.td-head{ background:#eeeeee;}
.heji{ font-size:20px;}
#zongjia{ color:#FF0004; font-weight:bold;}
</style>
</head>
<body>
<div class="jsq">
<h2>天十装饰装修报价DIY计算器</h2>
<table width="412" border="0" cellpadding="1" cellspacing="1">
<tr>
<td class="td-head" width="191"><strong>项目名称</strong></td>
<td class="td-head" width="75"><strong>实际工程量</strong></td>
<td class="td-head" width="49"><strong>单位</strong></td>
<td class="td-head" width="84"><strong>小计</strong></td>
</tr>
<tr>
<td>电路改造</td>
<td><input type="text" class="input" cheng=35.4></td>
<td>米</td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >地砖或木地板</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >平米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >厨卫墙砖</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >平米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >墙面乳胶漆</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >平米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >垭口套</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >延米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >窗口套</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >延米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >实木复合烤漆套装门</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >樘</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >卧室壁柜</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >平米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >厨房地柜</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >延米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >厨房吊柜</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >延米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >集成吊顶</p></td>
<td><input type="text" class="input" cheng=20></td>
<td><p >平米</p></td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >卫浴门</p></td>
<td><input type="text" class="input" cheng=20></td>
<td>樘</td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >隔断推拉门</p></td>
<td><input type="text" class="input" cheng=20></td>
<td>平米</td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >石膏板吊顶</p></td>
<td><input type="text" class="input" cheng=20></td>
<td>平米</td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >石膏顶角线</p></td>
<td><input type="text" class="input" cheng=20></td>
<td>延米</td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >洁具（花洒、坐便、浴室柜）</p></td>
<td><input type="text" class="input" cheng=20></td>
<td>组</td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
<tr>
<td><p >运杂费、管理费</p></td>
<td><input type="text" class="input" cheng=20></td>
<td>项</td>
<td align="right"><span class="xiaoji">0</span>元</td>
</tr>
</table>
<div class="heji">DIY装修价格成本合计: <strong>￥<span id="zongjia">0</span></strong> 元 </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".input").change(function(){
var input=$(this).val();
var cheng=$(this).attr("cheng");
var xiaoji=input*cheng;
$(this).parent().parent().find("td span").html(xiaoji.toFixed(2));
//alert(xiaoji.toFixed(2));
//获得总分
var zongjia=0;
$.each($(".xiaoji"),function(){//获得总分
zongjia+=parseFloat($(this).text());
});
$("#zongjia").html(zongjia);
});
});
</script>
</body>
</html>
页:
[1]