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日

相关文章

  • 原生JS中应该禁止出现的写法

    当使用原生JavaScript编写代码时,需要注意一些写法上的问题,避免引发不必要的错误或者性能问题。以下是几个应该禁止出现的写法。 1. 使用 document.write document.write 是一种在网页中输出HTML的方法,但是它的使用会破坏页面的结构,降低性能,还可能引起安全问题。当使用 document.write 时,浏览器会强制停止所…

    JavaScript 2023年6月10日
    00
  • js 控制页面跳转的5种方法

    当我们在网页应用程序中使用 JavaScript 时,经常需要通过编程的方式来控制跳转到另一个网页。下面是 5 种 JavaScript 控制页面跳转的方法的攻略。 1. 使用 window.location 属性 可以使用 window.location 属性跳转到新的页面。它表示当前页面的 URL,并允许您更改 URL 来跳转到另一个页面。例如,下面的代…

    JavaScript 2023年6月11日
    00
  • javascript 使用sleep函数的常见方法详解

    让我来详细讲解一下 “javascript 使用sleep函数的常见方法详解” 的完整攻略。 什么是sleep函数? 在JavaScript中,本质上并没有自带的sleep函数。它是一种同步执行的函数,能够在程序执行到该函数时阻塞线程一段时间,然后再继续执行。 常见的sleep实现方法 在JavaScript中实现sleep函数的方法有很多,这里介绍两个常见…

    JavaScript 2023年5月27日
    00
  • 详细解密jsonp跨域请求

    关于“详细解密jsonp跨域请求”的攻略,包含了如下几个步骤: 1. 什么是JSONP跨域请求 JSONP(JSON with Padding)是一种解决跨域资源共享的方法。它通过在页面的头部加上一个脚本(script)标签,并通过这个标签的src属性向另一个域名发出请求,另一个域名在返回的响应中放入一些JavaScript代码。返回的JavaScript代…

    JavaScript 2023年5月27日
    00
  • Javascript Date setDate() 方法

    以下是关于JavaScript Date对象的setDate()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的setDate()方法 JavaScript Date对象的setDate()方法设置日期对象的日期部分。该方法接受一个整数参数,表示要设置的日期。如果该参数超出了该月的最大日期,则自动调整为下一个月的第一天。 下面是使用D…

    JavaScript 2023年5月11日
    00
  • angular json对象push到数组中的方法

    使用Angular将JSON对象推入数组中的方法非常简单,在这里提供一些不同的方式来推送JSON对象到数组中: 方法1:使用push()方法 在Angular中,可以在数组上使用push()方法将JSON对象添加到一个数组中,例如: // JSON对象示例 let person = { name: "John", age: 30 }; /…

    JavaScript 2023年5月27日
    00
  • JavaScript遍历数组的方法代码实例

    当我们需要对JavaScript中的数组进行遍历时,我们有多种方法来实现。接下来我会详细讲解几种常用的JavaScript遍历数组的方法以及相应的代码实例。 1. for循环 通过 for 循环,我们可以轻松地遍历 JavaScript 数组。 // 遍历数组 let arr = ["apple", "banana",…

    JavaScript 2023年5月27日
    00
  • vue3使用vue-router及路由权限拦截方式

    让我为你讲解一下“vue3使用vue-router及路由权限拦截方式”的完整攻略。 1. 安装和配置vue-router 首先需要在项目中安装vue-router。 npm install vue-router 接下来在main.js中配置路由,并将其挂载到Vue实例上: import { createRouter, createWebHistory } f…

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