返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现简单购物小表格
  • 944
分享到

JavaScript实现简单购物小表格

2024-04-02 19:04:59 944人浏览 泡泡鱼
摘要

本文实例为大家分享了javascript实现简单购物小表格的具体代码,供大家参考,具体内容如下 html代码: <table border="" cellspacing="

本文实例为大家分享了javascript实现简单购物小表格的具体代码,供大家参考,具体内容如下

html代码:


<table border="" cellspacing="0" cellpadding="1">
   <tr style="background-color: #0099cc;">
    <td><input type="checkbox"class="all"/></td>
    <td style="text-align: center; width: 200px;">商品</td>
    <td style="color: white; width: 70px; height: 30px; text-align: center;">价钱</td>
   </tr>
   <tr class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>苹果</td>
    <td style="text-align: center;" class="zongji">8000</td>
   </tr>
   <tr  class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>香蕉</td>
    <td style="text-align: center;" class="zongji">5000</td>
   </tr>
   <tr  class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>梨子</td>
    <td style="text-align: center;" class="zongji">2000</td>
   </tr>
   <tr  class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>蔬菜</td>
    <td style="text-align: center;" class="zongji">2000</td>
   </tr>
   <tr>
    <td colspan="3">总价是:<span class="zongjia">0</span>元</td>
   </tr>
</table>

JQ代码:


<script src="Jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
     $(".all").change(function(){
      var value=$(this).prop("checked")
      $(".lla").prop("checked",value)
      zongjia()
     })
     $(".lla").click(function(){
      var chang1=$(".lla").length;
      var chang2=$(".lla:checked").length;
      if(chang1===chang2){
       $(".all").prop("checked",true)
      }else{
       $(".all").prop("checked",false)
      }
      zongjia()
     })
     $(".lla").change(function(){
      zongjia()
     })
     function zongjia(){
      var xuan=$(".lla:checked").parents(".zuida");
      var num=0;
      xuan.each(function(index,rom){
       var xuanzhi=$(rom).find(".zongji").text()*1;
       num+=xuanzhi;
      })
      $(".zongjia").text(num);
     }
    })
</script>

成品图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript实现简单购物小表格

本文链接: https://lsjlt.com/news/137091.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现简单购物小表格
    本文实例为大家分享了JavaScript实现简单购物小表格的具体代码,供大家参考,具体内容如下 html代码: <table border="" cellspacing="...
    99+
    2024-04-02
  • Python实现简单购物车小程序
    本文实例为大家分享了Python实现简单购物车小程序的具体代码,供大家参考,具体内容如下 要求 代码 # --*--coding:utf-8--*-- # Author: 村雨 ...
    99+
    2024-04-02
  • Vue实现简单购物车小案例
    本文实例为大家分享了Vue实现简单购物车的具体代码,供大家参考,具体内容如下 HTML首页 <!DOCTYPE html> <html lang="en">...
    99+
    2024-04-02
  • vue实现简单的购物车小案例
    本文实例为大家分享了vue实现简单购物车的具体代码,供大家参考,具体内容如下 最近在写vue的相关项目,所以找一些小例子练习一下,把一个js的购物车改成vue了 css部分是直接引入...
    99+
    2024-04-02
  • Android实现简单购物车
    本文实例为大家分享了Android实现简单购物车的具体代码,供大家参考,具体内容如下 这里我用到的都是Android自带SDK中的资源,做了一个极其简单的购物车实现,总结购物车难点包...
    99+
    2024-04-02
  • Python如何实现简单购物车小程序
    小编给大家分享一下Python如何实现简单购物车小程序,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下要求代码# --*--coding:utf-8--*--# Author: 村雨...
    99+
    2023-06-29
  • 微信小程序实现简单购物车小功能
    本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 微信小程序定制好看的购物车页面,实现购物车功能,希望对您有所帮助! 1. 应用场景2. 思路分析3....
    99+
    2024-04-02
  • python实现简单购物商城
    本文为大家分享了购物商城小程序,供大家参考,具体内容如下 软件版本:python3.x 功能:实现简单购物商城 1.允许用户选择购买多少件 2.允许多用户登录,下一次登录后,继续按上次的余额继续购买 3....
    99+
    2022-06-04
    购物商城 简单 python
  • js实现简单购物车模块
    本文实例为大家分享了js实现简单购物车模块的具体代码,供大家参考,具体内容如下 主要功能 输入框正则判断,两位数小数,开头可以为0 如果商品名字相同,自动数量+1...
    99+
    2024-04-02
  • vue实现简单购物车案例
    本文实例为大家分享了vue实现简单购物车的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> ...
    99+
    2024-04-02
  • Android如何实现简单购物车
    这篇文章主要介绍“Android如何实现简单购物车”,在日常操作中,相信很多人在Android如何实现简单购物车问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Android如何实现简单购物车”的疑惑有所帮助!...
    99+
    2023-07-02
  • Android实现简单购物车功能
    本文实例为大家分享了Android实现购物车功能的具体代码,供大家参考,具体内容如下MainActivity布局:<?xml version="1.0" encoding="utf-8"?><LinearL...
    99+
    2023-05-30
    android 购物车 roi
  • 微信小程序实现简单的购物车功能
    本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 实现一个购物车页面,需要哪些数据。整理下大概如下:一个购物车商品列表(carts),列表里的单个it...
    99+
    2024-04-02
  • vuex实现简单的购物车功能
    本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 文件目录如下: 购物车组件 <template> <div> ...
    99+
    2024-04-02
  • Vue实现简单的购物车案例
    本文实例为大家分享了Vue实现简单的购物车案例的具体代码,供大家参考,具体内容如下 代码: <template> <div> <div...
    99+
    2024-04-02
  • vue如何实现简单的购物车
    今天小编给大家分享一下vue如何实现简单的购物车的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效果图如下<templa...
    99+
    2023-07-02
  • vue实现简单的购物车功能
    本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 1.实现效果: 2.涉及到的知识点: toFixed函数、过滤器、reduce高阶函数、v-bin...
    99+
    2024-04-02
  • JS实现简单加减购物车效果
    本文实例为大家分享了JS实现简单加减购物车的具体代码,供大家参考,具体内容如下 1.书写input输入框作为加减实现的效果。 2.加减按钮用button按钮来实现 3.利用js控制i...
    99+
    2024-04-02
  • 利用session实现简单购物车功能
    本文实例为大家分享了利用session实现简单购物车功能的具体代码,供大家参考,具体内容如下 一、实现的功能 (1) 利用session实现购物车中的物品添加。(2)使用servle...
    99+
    2024-04-02
  • Android中RecyclerView实现简单购物车功能
    Android中RecyclerView实现简单的购物车,供大家参考,具体内容如下 我们知道在ListView中用setTag来解决Item的复用问题,但是RecyclerView中...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作