jquery表格里面有很多价格,点一个按钮把他们的总价格求出来
时间: 2023-12-03 08:44:24 浏览: 92
可以使用 jQuery 遍历表格中的所有价格,累加求和,并将结果显示在页面中。以下是示例代码:
HTML:
```html
<table id="my-table">
<thead>
<tr>
<th>商品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td class="price">10.00</td>
</tr>
<tr>
<td>商品2</td>
<td class="price">15.50</td>
</tr>
<tr>
<td>商品3</td>
<td class="price">20.00</td>
</tr>
</tbody>
</table>
<button id="btn-calculate">计算总价</button>
<p id="total-price">总价:0.00</p>
```
JavaScript:
```javascript
$(function() {
$('#btn-calculate').click(function() {
var totalPrice = 0;
$('#my-table tbody tr').each(function() {
var price = parseFloat($(this).find('.price').text());
if (!isNaN(price)) {
totalPrice += price;
}
});
$('#total-price').text('总价:' + totalPrice.toFixed(2));
});
});
```
解释:
首先,当用户点击按钮时,会触发 click 事件。
在事件处理程序中,我们使用 jQuery 的 `each()` 方法遍历表格中的每一行。对于每一行,我们使用 `find()` 方法查找该行中的价格单元格,并使用 `parseFloat()` 方法将价格转换为数值类型。
如果价格是一个有效的数值,我们就将它累加到 `totalPrice` 变量中。
最后,我们使用 `toFixed()` 方法将 `totalPrice` 转换为保留两位小数的字符串,并将结果显示在页面中。
阅读全文