JavaScript实现购物车基本功能
更新时间：2017年07月21日 08:39:01 作者：yudeboo
这篇文章主要为大家详细介绍了JavaScript实现购物车的基本功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript购物车最基本的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
}
th{
width: 80px;
height: 30px;
}
td{
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<table border="" cellspacing="" cellpadding="">
<thead>
<th ><input type="checkbox" id="checkedAll"/>选择</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>黄焖鸡米饭1</td>
<td>10</td>
<td>
<span class="jian">-</span>
<input type="text" style="width: 30px;text-align: center;" value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span style="color: red;">10</span>
</td>
<td>
<a style="cursor: pointer;">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>黄焖鸡米饭2</td>
<td>20</td>
<td>
<span class="jian">-</span>
<input type="text" style="width: 30px;text-align: center;"value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span style="color: red;">20</span>
</td>
<td>
<a style="cursor: pointer;">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
window.onload=function(){
var checkedAll=document.getElementById("checkedAll")
var tb=document.getElementById("tb")
var oinput=tb.getElementsByTagName('input')
var jian=document.getElementsByClassName('jian')
var jia=document.getElementsByClassName('jia')
var shanchu=tb.getElementsByTagName('a')
console.log(shanchu)
//全选
checkedAll.onclick=function(){
for(var i=0;i<oinput.length;i++){
oinput[i].checked=this.checked
}
}
//当下级有一个没有选中时那么全选按钮则为false状态
for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
var qx=true
for(var i=0;i<oinput.length;i++){
if(oinput[i].checked==false){
qx=false
}
}
checkedAll.checked=qx
}
}
checkedAll.onclick=function(){
for(var i=0;i<oinput.length;i++){
oinput[i].checked=this.checked
}
}
for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
var qx = true;
for(i=0;i<oinput.length;i++){
if(oinput[i].checked==false){
qx=false
}
}
checkedAll.checked=qx
}
}
//加
for(var i=0;i<jia.length;i++){
jia[i].onclick=function(){
//previousSibling上一个兄弟节点
var val = parseInt(this.previousSibling.previousSibling.value);
this.previousSibling.previousSibling.value = val + 1;
jisuan(this)
}
}
//减
for(var i=0;i<jian.length;i++){
jian[i].onclick=function(){
//nextSibling下一个兄弟节点
var val = parseInt(this.nextSibling.nextSibling.value);
if(val > 1) {
this.nextSibling.nextSibling.value = val - 1;
}
jisuan(this)
}
}
//操作删除
for(var i=0;i<shanchu.length;i++){
shanchu[i].onclick=function(){
var conf = confirm('确定删除这件商品吗？');
//parentNode父节点
console.log(this.parentNode.parentNode)
if(conf) {
//removeChild 删除节点
tb.removeChild(this.parentNode.parentNode);
}
}
}
//总价
function jisuan(t){
var tr=t.parentNode.parentNode
var result=document.getElementById("result")
var td=tr.getElementsByTagName('td')
td[4].getElementsByTagName('span')[0].innerHTML = parseInt(td[2].innerHTML)*parseInt(t.parentNode.getElementsByTagName('input')[0].value)
}
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
模仿淘宝首页的拼音排序效果代码。2009-05-05
Javascript实现当页面滚动到底部时触发加载事件,可以通过监听窗口的滚动事件,同时判断当前滚动条的位置和文档总高度来实现该功能,这篇文章主要给大家介绍了关于JS实现滚动触底的思路与代码,文中还附PC端滚动分页加载数据,需要的朋友可以参考下2024-06-06
JavaScript中的构造函数和实例对象之间的关系(构造器)
这篇文章主要介绍了JavaScript中的构造函数和实例对象之间的关系(构造器),需要的朋友可以参考下2023-05-05
JavaScript中清空数组的三种方法分享，需要的朋友可以参考下。2011-04-04
这篇文章主要为大家详细介绍了原生js+canvas实现下雪效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了JavaScript防抖案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了js 下拉菜单点击旁边收起实现(踩坑记)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
在实际项目中很多时候我们需要获取设备的位置信息，去展示给客户，或者以位置信息为参数，继续向服务器获取一些数据，这篇文章主要介绍了uni-app如何获取位置信息(经纬度),需要的朋友可以参考下2022-11-11
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
下面小编就为大家带来一篇浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试,需要的朋友可以了解下2012-11-11
最新评论