下面是“JavaScript实现简单购物小表格”的完整攻略:
1.准备工作
在HTML中,首先要准备一个表格元素,代码如下:
<table>
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td><input class="price" type="number" value="0"></td>
<td><input class="quantity" type="number" value="1"></td>
<td class="sub-total">¥0</td>
</tr>
<tr>
<td>商品2</td>
<td><input class="price" type="number" value="0"></td>
<td><input class="quantity" type="number" value="1"></td>
<td class="sub-total">¥0</td>
</tr>
<tr>
<td>商品3</td>
<td><input class="price" type="number" value="0"></td>
<td><input class="quantity" type="number" value="1"></td>
<td class="sub-total">¥0</td>
</tr>
<tr>
<td>总计</td>
<td colspan="3" class="total">¥0</td>
</tr>
</tbody>
</table>
这里我们用到了表格元素和HTML5中的输入元素,我们为每个商品的单价和数量设置了一个输入框,为了方便计算小计和总计,我们为每个商品的小计设置了一个类名sub-total,并将总计的类名设置为total。
2.编写JavaScript代码
我们可以通过JavaScript来实现当用户输入单价或数量时自动计算小计和总计的功能。首先在HTML代码中添加JavaScript链接:
<script src="shopping.js"></script>
然后在shopping.js文件中编写JavaScript代码:
var tbody = document.querySelector('tbody'); // 获取表格的tbody元素
var trs = tbody.querySelectorAll('tr'); // 获取表格中的所有tr元素
var total = document.querySelector('.total'); // 获取总计元素
for (var i = 0; i < trs.length - 1; i++) { // 循环遍历表格中的每个商品
trs[i].querySelector('.price').addEventListener('input', calcSubTotal); // 当输入单价时,计算小计
trs[i].querySelector('.quantity').addEventListener('input', calcSubTotal); // 当输入数量时,计算小计
}
function calcSubTotal() { // 计算小计函数
var tr = this.parentNode.parentNode; // 获取当前输入框所在的tr元素
var price = tr.querySelector('.price').value; // 获取单价
var quantity = tr.querySelector('.quantity').value; // 获取数量
var subTotal = tr.querySelector('.sub-total'); // 获取小计元素
subTotal.innerHTML = '¥' + (price * quantity); // 计算小计
calcTotal(); // 计算总计
}
function calcTotal() { // 计算总计函数
var trs = tbody.querySelectorAll('tr'); // 获取表格中的所有tr元素
var sum = 0;
for (var i = 0; i < trs.length - 1; i++) { // 循环遍历表格中的每个商品
var subTotal = trs[i].querySelector('.sub-total').innerHTML.replace('¥', ''); // 获取小计并去掉前缀
sum += parseFloat(subTotal); // 累加小计
}
total.innerHTML = '¥' + sum; // 更新总计
}
这段JavaScript代码中,我们首先获取表格的tbody元素、所有tr元素、总计元素,然后遍历所有商品的单价和数量输入框,当输入框内容改变时,调用calcSubTotal函数计算小计并计算总计。最后更新小计和总计元素的内容。
3.运行代码并验证
将HTML和JavaScript代码保存后,我们在浏览器中打开页面,并输入相应的单价和数量,验证小计和总计是否正确。
例如,将商品1的单价设为10元,数量设为2个,那么小计将会是20元,总计将会是20元。又例如,将商品2的单价设为15元,数量设为3个,那么小计将会是45元,总计将会是65元。
这就是实现“JavaScript实现简单购物小表格”的完整攻略,希望对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现简单购物小表格 - Python技术站