html中实现表格自动计算,怎么没用呀?

html中实现表格自动计算,怎么没用呀?,第1张

<!doctype html>

<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等等宽度”都要加上了。

不知道是不是回答了你的问题!?


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7667153.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-08
下一篇2023-04-08

发表评论

登录后才能评论

评论列表(0条)

    保存