购物车前台页面代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车自动计价</title>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
$(function(){
$(".se").change(function(oEven) {
var num = $(this).find("option:selected").text();
var price = $(this).parent().next().text();
$(this).parent().next().next().text(num*price);
GetInAll();//计算所有物品价格
});
})
function GetInAll()
{
var len = $("#PriceTable tbody").children("tr").length;
var priceCount=0;
for(var i=0;i<len;i++)
{
// var tempData=rows[i];
var price1 = $("#PriceTable tbody tr:eq("+i+") td:eq(4)").text();
priceCount=parseFloat(priceCount)+parseFloat(price1);
}
$("#PriceTable tfoot tr td:eq(1)").text(priceCount);
}
</script>
<style type="text/css">
table input[type=text]{ width:32px;}
</style>
</head>
<body>
<div>
<table id="PriceTable">
<thead><tr><td>物品编号</td><td>物品名称</td><td >数量</td><td>价格</td><td>小计</td></tr></thead>
<tbody>
<tr>
<td >jsp_123</td>
<td >电脑</td>
<td>
<select name="se" class="se">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
</select>
</td>
<td >1950</td>
<td >1950</td>
</tr>
<tr>
<td >jsp_123</td>
<td >电脑</td>
<td>
<select name="se" class="se">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
</select>
</td>
<td >1950</td>
<td >1950</td>
</tr>
<tr>
<td >jsp_123</td>
<td >电脑</td>
<td>
<select name="se" class="se">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
</select>
</td>
<td >1950</td>
<td >1950</td>
</tr>
</tbody>
<tfoot>
<tr><td>总计:</td><td colspan="4">5850</td></tr>
</tfoot>
</table>
</div>
<input type="button" onclick="GetInAll()" value="计算" />
</body>
</html>
