JavaScript实现购物车基本功能
程序员文章站
2023-02-24 10:18:59
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： js轮播图的插件化封装详解