JavaScript实现简单购物小表格

下面是“JavaScript实现简单购物小表格”的完整攻略：

下面是“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实现简单购物小表格”的完整攻略，希望对你有所帮助。