简易购物车功能

*{padding: 0;margin: 0}

.mian{width: 500px;margin: 0 auto;margin-top: 20px;}

table{text-align: center;}

button{border: 0;background-color: #000;color: #fff;border-radius: 50%;width: 25px;height: 25px;margin:  10px;font: 18px/25px "微软雅黑";font-weight: bolder;outline:none}

input{width: 15px;height: 15px;}

em{font-style: normal;}

简易购物车
选择 名称 单价 数量 小计
鞋子 2元/双 -5+ 10
鞋子 2元/双

-5+

10
总价:¥10

$(".minus").click(function(){

var number=$(this).siblings("em");

var haha=number.html();

// console.log(haha);

if(haha>0){

var newN=Number(haha)-1;

number.html(newN);

return newN

}

});

$(".add").click(function(){

var number=$(this).siblings("em");

var haha=number.html();

// console.log(haha);

if(haha>=0){

var newN=Number(haha)+1;

number.html(newN);

return newN

}

});

//点击优化

$("#tableList .trList").click(function(){

var checked=$(this).find("input[type=checkbox]");

var flag=checked.prop("checked")?true:false;

checked.prop("checked",!flag);

// if(checked.prop("checked",false)){

// }

})

function jisuan(a,b){

var sum=Number(a*b);

return sum;

}

var allNum=0;

$("tr").each(function(){

var a=$(this).find('.price').text();

console.log(a);

var thisNumber=$(this).data("number");

allNum=allNum+thisNumber

})

$(".zuzhi").click(function(e){

e.stopPropagation();

})

//  $("tr").click(function(){

//    var aa=$(this).find("tr");

//    console.log(aa);

//   if(input[type=checkbox].prop("checked")){

//     $("input[type=checkbox]").prop("checked",false);

//     alert("取消!")

//   }else{

//     $("input[type=checkbox]").prop("checked",true);

//     alert("选中!")

//   }

// })

// 百度的

// $('table').on('click', 'tr', function () {

//   var checkbox=$(this).find("input[type=checkbox]");

// // checkbox.prop("checked", !checkbox.prop("checked"));

// if(checkbox.prop("checked")){

//   checkbox.prop("checked",false);

//   alert("取消!")

// }else{

//   checkbox.prop("checked",true);

//   alert("选中!")

// }

// });

我想要是实现的是:点击哪一行的tr (或者多选tr),然后可以点击 按钮 - 和+ 来控制数量,计算 tr中的小计,最后计算总价。

我比较困惑的一点是,我可以实现一行的功能,自己对当前获取的元素能力不够,写出来都是全部值都一起改变了。然后没有什么思路代码很凌乱,将就看看。谢谢耐心看完的小伙伴哦~

匹配出html代码中的table的全部内容,如何在table这样的形式 获取多个tr中的值?以下是我写的简易html 和凌乱的代码。求解答Q.Q...相关推荐

  1. 3、JavaWeb中Service层的作用、MyBatis的重要组件、mybatis-config.xml中的别名映射、properties配置、#{}和${}的区别、获取插入数据的主键值

    文章目录 1.Service层的作用 2.MyBatis重要组件 Resources SqlSessionFactoryBuilder SqlSessionFactory SqlSession 针对上 ...

  2. 如何获取字符串中某个具体的数值--通过json.load转化成字典形式获取

    r=requests.get('http://httpbin.org/get').text print(r) # print(type(r)) # 如果要获取User-Agent的详细数值,需要做JS ...

  3. php oracle 操作 sql语句中能不能添加数组_如何在PHP中使用Oracle数据库_php

    在php3.0以上版本中,php内置了几乎目前所有的数据库处理函数,包括oracle;在本文中我们通过一个实例来介绍了如何使用这些函数来操作Oracle数据库. PHP提供了2大类API(应用程序接口 ...

  4. php td内容换行,table单元格内容过多换行显示

    节目名称所属电视台版本开始时间结束时间获取时间操作 [#if list][#list list.items as t] ${t.program}${t.channelName}${t.__v}${t. ...

  5. 极速系列04—python批量获取word/PDF/网页中的表格

    这里写目录标题 1 python批量获取word中的表格 目的: 1.1 简介 1.2 读取word文档内容 方法一 方法二 2 python批量获取PDF中的表格 目的: 2.1 简介 2.2 读取 ...

  6. unity中请问如何点击一下image(image加了button项)变红色再点击一下按钮变成绿色。一直这么循环变色?急求,望大佬指点emmm。c#代码

    unity中请问如何点击一下image(image加了button项)变红色再点击一下按钮变成绿色.一直这么循环变色?急求,望大佬指点emmm.c#代码

  7. 双目立体视觉源代码 双目立体视觉匹配程序 双目视觉3d成像(三维重构图像处理) 基于双目视觉的深度计算和三维重建 opencv写的双目视觉摄像机标定和三维重建代码

    双目视觉/双目标定源码/图片集标定匹配三维重建坐标计算OpenCV 1.双目立体视觉源代码(包括标定,匹配,三维重建) 2.双目视觉实验图片集(双目立体视觉中使用的标准实验图,适合初学者进 行实验使用 ...

  8. android studio table居中代码_html table表格标签内容如何居中显示?表格的align属性的用法介绍...

    本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...

  9. 输入命题p和q的真值,求p、q的合取、析取、异或、蕴含和等值命题的真值

    1. 输入命题p和q的真值,求p.q的合取.析取.异或.蕴含和等值命题的真值. 更进一步:按从左至右的运算顺序,能给出3个命题变量以内(包含3个)的命题公式的真值表. 思路:输入p.q值,(局限:p. ...

  10. 这段python代码虐待我无数,求解答

    这段python代码虐待我无数,求解答 import tkinter as tk import pymysql import time root=tk.Tk() root.geometry(" ...

最新文章

  1. bc计算命令的知识及企业计算案例
  2. 水域大小 Java_水域大小
  3. artdialog 异步加载页面 生成验证码
  4. android之tab分页标签的实现方法,Android应用中使用ViewPager和ViewPager指示器来制作Tab标签...
  5. .NET Core剪裁器升级瘦身引擎,并支持剪裁计划的录制和回放
  6. 如何在.NET Core中为gRPC服务设计消息文件(Proto)
  7. SpringBoot+VUE 前端加密算法 RSA+DES
  8. 使用Seaborn和Pandas进行数据可视化
  9. 【C++ 与 STL】双端队列:deque
  10. java 类 引用数组对象_Java 方法重载与引用数组类型
  11. visio2003 反向工程链接 mssql2005
  12. 山西计算机网络系统安装,山西初中信息技术考试系统操作手册-20210410201505.docx-原创力文档...
  13. Redis远程连接出现An existing connection was forcibly closed by the remote host.远程主机强制关闭现有连接
  14. 【WiFi】WiFi安全类型
  15. kaggle房价预测
  16. STM8S003FP6 TIM4配置
  17. 虚拟机WindowServer2003共享文件夹
  18. 如何往hive直接插入自定义数据values
  19. idea html特别卡,完美解决idea突然间很卡的问题
  20. Python自学难吗?Python课程主要学些什么内容?

热门文章

  1. python获取读取文件的文件名_python文件名获取文件路径
  2. mysql建表语句外键_mysql里面用语句怎么建立表外键的命令
  3. python工程文件如何打包_python 项目打包
  4. 程序员梗_那些程序员才懂的梗,看到第10张笑喷了,网友:太真实了
  5. android初始化框架alpha,Android Chart 框架 MPAndroidChart 学习笔记1_框架初始化
  6. electron编译nodejs模块的方法
  7. Android -- tools
  8. 开源一个WEB版本GEF,基于SVG的网页流程图框架
  9. 部署shop++,启动eclipse遇到内存溢出。
  10. 如何成功发布一个MSMQ的Windows服务