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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现简单购物小表格 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • uniapp定义动画的几种方式总结

    下面我会详细讲解“uniapp定义动画的几种方式总结”的完整攻略。 uniapp定义动画的几种方式总结 uniapp是一种基于Vue.js开发的跨平台框架,通过uniapp,我们可以轻松地开发出同时支持安卓和iOS的应用程序。在uniapp中定义动画,一般可以通过以下几种方式: 1. 使用CSS动画 在uniapp中,我们可以使用CSS动画来定义动画效果。具…

    JavaScript 2023年6月11日
    00
  • JS数组方法push()、pop()用法实例分析

    JS数组方法push()、pop()用法实例分析 push()方法 push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。 语法 arr.push(element1[, …[, elementN]]) 参数 element1[, …[, elementN]]: 要添加到数组末尾的一个或多个元素。 返回值 数组新的长度 示例 cons…

    JavaScript 2023年5月28日
    00
  • 详解JS截取字符串的三个方法substring,substr,slice

    substring() 方法 substring() 方法用于提取字符串中两个指定索引之间的字符。语法如下: stringObject.substring(start, stop) 参数 start:必选,正整数,规定要提取的子串的第一个字符在 stringObject 中的位置。必须是数值,如果不是,会自动转换为数字。 参数 stop:可选,正整数,且必须…

    JavaScript 2023年5月28日
    00
  • 关于__defineGetter__ 和__defineSetter__的说明

    关于 __defineGetter__ 和 __defineSetter__ 的说明 __defineGetter__ 和 __defineSetter__ 是 JavaScript 中的两个方法,它们可以用于动态定义属性的 getter 和 setter 方法。在 ES5 中已经被废弃,建议使用 Object.defineProperty 来替代它们。 _…

    JavaScript 2023年6月10日
    00
  • js跨域调用WebService的简单实例

    下面是详细讲解“js跨域调用WebService的简单实例”的完整攻略,包含了两条示例说明。 什么是跨域调用? 在同源策略下,Web页面只能调用同一域名下的Web服务,无法调用外部的Web服务。这是因为出于安全考虑,为防止页面通过Javascript获取到外部服务的数据后,将数据篡改或者传输给恶意的第三方站点。 但是有时候,我们确实需要通过Javascrip…

    JavaScript 2023年6月11日
    00
  • Javascript中的匿名函数与封装介绍

    Javascript中的匿名函数与封装介绍 Javascript中的匿名函数和封装是两个非常重要的概念。使用匿名函数可以避免全局变量污染,而封装则可以保护代码,避免不必要的干扰和修改。本文将详细讲解Javascript中的匿名函数和封装,以及如何使用它们来提高你的代码质量和安全性。 匿名函数 匿名函数是Javascript中的一种特殊函数,它没有函数名,只有…

    JavaScript 2023年5月27日
    00
  • JavaScript实现的MD5算法完整实例

    JavaScript实现MD5算法完整实例攻略 简介 MD5是一种广泛使用的密码加密算法,它可以将任意长度的消息转换为128位的消息摘要。在实际开发过程中,我们需要使用MD5算法来保证密码等敏感信息的安全性。本文将讲解如何使用JavaScript实现MD5算法。 步骤 引入MD5库 我们可以在网上找到许多JavaScript实现MD5算法的库,如SparkM…

    JavaScript 2023年5月19日
    00
  • JavaScript中标识符提升问题

    JavaScript中标识符提升问题是指在JavaScript代码中,变量或函数在声明之前仍然可以被引用和使用的问题。这是JavaScript语言本身的一个特性,不是一个错误。这种特性也被称为提升(Hoisting)。 在JavaScript代码中,当我们声明一个变量或函数时,它们会在代码执行之前被“提升”到代码的顶部。这意味着我们可以在声明之前使用它们。但…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部