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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Affix是BootStrap中的一个很有用的控件，他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域。本文重点给大家介绍BootStrap中Affix控件的使用及保持布局的美观的方法，感兴趣的朋友一起看看吧2016-07-07
这篇文章主要介绍了JavaScript中return false的用法,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
今天小编就为大家分享一篇解决layui-table单元格设置为百分比在ie8下不能自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了js模拟实现京东详情页图片放大效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了JS实现在状态栏显示打字效果的方法,涉及JavaScript中字符遍历结合时间函数对状态栏显示进行操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
JS模仿MSN右下角弹出提示框代码，需要的朋友可以参考下。2010-09-09
这篇文章主要为大家详细介绍了微信小程序实现答题功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了小程序new Date()方法失效问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JavaScript实现模仿桌面窗口的方法,可实现模仿桌面窗口的打开、关闭、移动、缩放及最大化、最小化等功能,需要的朋友可以参考下2015-07-07
最新评论