<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示购物车</title>
<script src="../js/item.js"></script>
<style>
.num{
width:20px;
}
body{
background-image: url("../image/背景1.jpg");
background-size:100% 100%;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.d1{
width: 50;
height: 50;
float: right;
margin-right: 50px
}
.button{
background-color: #ffa500;
border-radius: 4px;
height: 36px;
}
a{
text-decoration: none;
color:brown;
}
.d2{
width:1200px;
border-bottom:5px solid #ffa500;
margin:0 auto;
}
.table{
width: 1000px;
height: 150px;
border: 3px solid gray ;
color: brown;
margin-left: 120px;
margin-top: 50px;
background-color: aliceblue;
}
.h3{
font-size: 45px;
font-family:"微软雅黑";
color:#ffd700;
text-align: center;
}
.d3{
background-color: blue;
}
</style>
</head>
<body onload="showCar()">
<div class="d2">
<h3 class="h3">购物车结算</h3>
</div>
<table width="1000" height="300px" border="1px" cellspacing="0" class="table">
<thead>
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<div class="d1">
<a href="sum1.html"><button class="button">结算</button></a>
<a href="index.html"><button class="button">返回首页</button></a>
</div>
</div>
<script>
function showCar() {
var items = getItems();
var tb = document.getElementById("tb");
for(var i = 0; i < items.length; i++) {
var item = items[i];
/*
创建节点
*/
//创建tr
var tr = document.createElement("tr");
//创建复选框
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id","item.id");
//第一个单元格
var td = document.createElement("td");
td.innerHTML = item.goodsName;
td.appendChild(checkBox);
// 第二个单元格
var td1 = document.createElement("td");
td1.innerHTML = item.goodsPrice;
//创建第三个单元格
var td2 = document.createElement("td");
//创建“-”按钮
var decre = document.createElement("button");
decre.innerHTML = "-";
decre.onclick = jian;
//创建数量的文本框
var num = document.createElement("input");
num.type = "text";
num.value = item.num;
num.className = "num";
//创建“+”按钮
var incre = document.createElement("button");
incre.innerHTML = "+";
incre.onclick = add;
//把按钮文本框添加到单元格中
td2.appendChild(decre);
td2.appendChild(num);
td2.appendChild(incre);
//创建第四个单元格
var td3 = document.createElement("td");
td3.innerHTML = item.sum;
//创建第五个单元格
var td4 = document.createElement("td");
//创建一个隐藏域
var idInput = document.createElement("input");
idInput.type = "hidden";
idInput.value = item.id;
var del = document.createElement("button");
del.innerHTML = "删除";
del.onclick = delTr;
//把删除按钮添加到文本框中
td4.appendChild(del);
td4.appendChild(idInput);
//把单元格添加到tr中
tr.appendChild(td);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tb.appendChild(tr);
}
}
//删除行
function delTr() {
//nextElementSibling 下一个兄弟节点
var id = this.nextElementSibling.value;
var flag = confirm("是否删除？");
if(flag) {
var items = getItems();
for(var i = 0; i < items.length; i++) {
if(items[i].id == id) {
items.splice(i,1);
break;
}
}
setItems(items);
location.reload();
}
}
//减少数量
function jian() {
var inputNum = this.nextElementSibling
var oldValue = inputNum.value;
//获取id
var tds = this.parentNode.parentNode.getElementsByTagName("td");
var id = tds[4].getElementsByTagName("input")[0].value;
if(oldValue > 1) {
oldValue--;
var items = getItems();
for(var i = 0; i < items.length; i++) {
if(items[i].id == id) {
items[i].num = oldValue;
items[i].sum = oldValue * items[i].goodsPrice;
break;
}
}
setItems(items);
}else{
alert("不能在少了");
}
location.reload();
}
//增加数量
function add() {
var inputNum = this.previousElementSibling;
var oldValue = inputNum.value;
//获取id
var tds = this.parentNode.parentNode.getElementsByTagName("td");
var id = tds[4].getElementsByTagName("input")[0].value;
if(oldValue < 10) {
oldValue++;
var items = getItems();
for(var i = 0; i < items.length; i++) {
if(items[i].id == id) {
items[i].num = oldValue;
items[i].sum = oldValue * items[i].goodsPrice;
break;
}
}
setItems(items);
}else{
最终练习.rar
需积分: 1 73 浏览量
2023-11-21
09:22:09
上传
评论
收藏 3.36MB RAR 举报
最终练习.rar （23个子文件） 
最终练习 .vscode 
settings.json 42B image 
banana.png 252KB
liulian.jpg 69KB jiesuan.jpg 51KB grape.png 353KB logo.png 158KB apple.png 1.44MB 背景1.jpg 101KB pear.jpg 276KB cherry.jpg 179KB caomei.jpg 207KB melon.jpg 31KB apple1.jpg 143KB peach.png 78KB 背景3.jpg 168KB js item.js 643B index.js 6KB css html 
sum1.html 4KB
goodsDetail.rar 2KB goodsDetail.html 6KB sum.html 4KB showCar.html 8KB index.html 2KB资源评论
