
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>test</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<table id="Order">
<tr>
<th>费用名目</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
</tr>
<tr class="trData">
<td>ItemA</td>
<td><input type="text" class='txtQuantity' /></td>
<td><input type="text" class='txtPrice' /></td>
<td><input type="text" class='txtAmount' /></td>
</tr>
<tr class="trData">
<td>ItemB</td>
<td><input type="text" class='txtQuantity' /></td>
<td><input type="text" class='txtPrice' /></td>
<td><input type="text" class='txtAmount' /></td>
</tr>
<tr class="trData">
<td>ItemC</td>
<td><input type="text" class='txtQuantity' /></td>
<td><input type="text" class='txtPrice' /></td>
<td><input type="text" class='txtAmount' /></td>
</tr>
<tr class="trData">
<td colspan="3" style="text-align:right">总计</td>
<td><span id="total"></span></td>
</tr>
</table>
<script>
$(function(){
CalcSum()
function CalcSum(){
var total_sum = 0
$("#Order .txtAmount").each(function () {
var val = $(this).val()
if ($.isNumeric(val)) {
total_sum += parseFloat(val)
}
})
$("#total").html(total_sum)
}
$("#Order").on('input', '.txtQuantity', function () {
var self = $(this)
var tr = self.closest("tr")
var quantity = self.val()
var Price = tr.find(".txtPrice").val()
var amount = 0
if ($.isNumeric(quantity) &&$.isNumeric(Price)) {
amount = quantity * Price
}
tr.find(".txtAmount").val(amount)
CalcSum()
})
$("#Order").on('input', '.txtPrice', function () {
var self = $(this)
var tr = self.closest("tr")
var quantity = tr.find(".txtQuantity").val()
var Price = self.val()
var amount = 0
if ($.isNumeric(quantity) &&$.isNumeric(Price)) {
amount = quantity * Price
}
tr.find(".txtAmount").val(amount)
calcSum()
})
})
</script>
</body>
</html>
那要看你要什么宽度了。如果说,你想让这个table
放到一个DIV里面去,而DIV的宽度就要是你说的那些都加上了。
但是为什么要算表格的宽度呢,我乍一想大概就是这个原因吧。
也就是说,如果在table的外层套一个标签而要计算table的宽度,那就要把什么“border
.cellpadding
cellspacing
margin等等宽度”都要加上了。
不知道是不是回答了你的问题!?
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)