求html购物车代码，，效果如图显示_IT百科

<head>

body{

font-size:13px

line-height:25px

}

table{

border-top: 1px solid #333

border-left: 1px solid #333

width:400px

}

td{

border-right: 1px solid #333

border-bottom: 1px solid #333

text-align:center

}

.title{

font-weight:bold

background-color: #cccccc

}

input text{

width:100px

}

</style>

function addRow(){

//行的长度

var rowlength=document.getElementById("order").rows.length

//得到整个表格对象

var order = document.getElementById("order").insertRow(rowlength-1)

order.id=rowlength-1

//插入列

var cel1=order.insertCell(0).innerHTML="游戏光盘"

var cel2=order.insertCell(1).innerHTML="34"

var cel3=order.insertCell(2).innerHTML="&yen58.40"

var cel4=order.insertCell(3).innerHTML="<input type=\"button\"value=\"删除\" onclick=\"delRow('"+(rowlength-1)+"')\"/>"+ "<input type=\"button\"value=\"修改\" onclick=\"editRow('"+(rowlength-1)+"')\"/>"

}

function delRow(qwe){

var ewq=document.getElementById(qwe).rowIndex

document.getElementById("order").deleteRow(ewq)

}

function editRow(rowID){

var row=document.getElementById(rowID)

var cel=row.cells

var text=cel[1].innerHTML

cel[1].innerHTML="<input type='text' value='"+text+"' style='width:40px'>"

cel[3].lastChild.value="确定"

cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')")

}

function update(qwe){

var row=document.getElementById(qwe)

var cel=row.cells

var text=cel[1].lastChild.value

cel[1].innerHTML=text

cel[3].lastChild.value="修改"

cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')")

}

function add(){

var a = document.getElementById("order").rows.length

var b = document.getElementById("order").insertRow(a-1)

var one1 = b.insertCell(0).innerHTML="123"

}

</script>

</head>

<body>

</tr>

<td>防滑真皮休闲鞋</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

这个是我原来上学的时候练习的代码，练习的是基础的jsDOM *** 作，不过建议以后用Jquery 比较方便有什么不懂得可以问我

html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax

纯前端的话可以参考下面的

<!DOCTYPE html>

<head>

body,p,a,input{

margin: 0

padding: 0

font-size: 12px

}

.container{

width: 100%

}

.main{

width: 1000px

height: 500px

margin:100px auto

}

.main .cart-container table{

width: 100%

}

.main .cart-container table tr{

text-align: center

}

.main .cart-container table tr:hover{

background: rgba(128, 128, 128, 0.2)

}

.main .cart-container table .table-header{

height: 30px

background: #d9d9d9

font-size: 1.2em

}

.main .cart-container table .table-header td:first-child{

border-left: solid 4px red

box-sizing: border-box

}

.main .cart-container table tr td:nth-child(1),

.main .cart-container table tr td:nth-child(2){

text-align: left

}

.main .cart-container table tr td:nth-child(2){

width: 52%

}

.main .cart-container table tr td:nth-child(3){

width: 12%

}

.main .cart-container table tr td:nth-child(4){

width: 12%

}

.main .cart-container table tr td:nth-child(5){

width: 12%

}

.main .cart-container table tr td:last-child{

width: 10%

}

.cart-good{

height: 60px

}

.cart-good img{

float: left

margin: 10px

width: 60px

}

.cart-good td p{

margin: 10px 0px

}

/*加、减按钮*/

.cart-good td input[type='button']{

width: 20px

height: 20px

background: #00f300

outline: none

border: none

}

.cart-good td input[type='button']:disabled{

background: grey

}

.cart-good td input[type='button']:first-child{

margin-right: -4px

}

.cart-good td input[type='button']:last-child{

margin-left: -4px

}

.cart-good td input[type='text']{

width: 30px

height: 20px

outline: none

border: none

text-align: center

}

.table-footer{

display: flex

justify-content: space-between

line-height: 40px

}

.table-footer div{

font-size: 1.2em

}

.table-footer div button{

background: red

width: 120px

height: 40px

color: white

}

</style>

</head>

<body>

<td>聚美优品发货</td>

</tr>

</table>

<div>

<span style="margin-left: 20px">继续购物 | 清空选中商品</span>

</div>

<div>

共 <span id="good_count">5</span>件商品商品应付总额：<span id="goods_total">¥229.00</span>

</div>

</section>

</div>

(function () {

var skin_products= [

{

"id":"002",

"title": "Estee Lauder 多效智妍精华霜15ml",

"img_url": "http://p0.jmstatic.com/product/003/565/3565880_std/3565880_350_350.jpg",

"price": 249.0,

"number":6,

"acount": "520",

"ischecked":true

{

"id":"004",

"title": "EsteeLauder 肌透修护洁面乳30ml",

"img_url": "http://p4.jmstatic.com/product/003/155/3155764_std/3155764_350_350.jpg",

"price": 49.9,

"number":1,

"acount": "5911",

"ischecked":false

{

"id":"008",

"title": "雅诗兰黛无痕持妆粉底液",

"img_url": "http://p3.jmstatic.com/product/003/662/3662318_std/3662318_350_350.jpg",

"price": 69.9,

"number":2,

"acount": "3972",

"ischecked":true

{

"id":"0012",

"title": "Estee Lauder 肌初赋活原生液30ml",

"img_url": "http://p4.jmstatic.com/product/003/565/3565914_std/3565914_350_350.jpg",

"price": 159.0,

"number":1,

"acount": "2338"

{

"id":"001",

"title": "雅诗兰黛无痕持妆粉底液30ml",

"img_url": "http://p2.jmstatic.com/product/001/648/1648502_std/1648502_350_350.jpg",

"price": 298.0,

"number":4,

"acount": "5071",

"ischecked":false

{

"id":"009",

"title": "雅诗兰黛眼部精华霜15ml",

"img_url": "http://p1.jmstatic.com/product/001/049/1049746_std/1049746_350_350.jpg",

"price": 399.0,

"number":1,

"acount": "4022",

"ischecked":false

}

]

// 添加商品

function load() {

var tbody=document.querySelector('.cart-container table tbody')

for(let good of skin_products){

tbody.innerHTML+=` <tr class="cart-good" id="${good.id}">

<td>

<p>[极速免税]PITTA MASK 口罩3枚入</p>

<p>型号：新版防晒款容量：3枚入</p>

</td>

<td>${good.price}</td>

<td>

</td>

<td>${good.price*good.number}</td>

</tr>`

}

totalAcount()

}

load()

// end all..........

// 1. 为table注册单击事件

var table01=document.querySelector('.cart-container table')

table01.onclick=function (event) {

var node=event.target

if(node.getAttribute('type')=='button'){

// alert(event.target.value)

changeNumber(event)

subtotal(event)

checkedRow(event)

checkedAllRows()

}else if(node.className=='good-check'){

checkedAllRows()

}else if(node.id=='chk_alla'){

var f=event.target.checked

var chks=document.querySelectorAll('.good-check')

for(var ck of chks){

ck.checked=f

}

for(var good of skin_products){

good.ischecked=f

}

}else if(node.nodeName.toLowerCase()=='a'){

var tr=event.target.parentNode.parentNode

for(var i=0i<skin_products.lengthi++){

if(skin_products[i].id==tr.id){

skin_products.splice(i,1)

console.log(skin_products)

}

tr.parentNode.removeChild(tr)

}

totalAcount()

}

//单击增加或减少按钮的方法

function changeNumber(event) {

var node=event && event.target

var v=0

if(node.value && node.value=='+'){

// node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1

node.previousElementSibling.value++

v=node.previousElementSibling.value

node.previousElementSibling.previousElementSibling.disabled=false

}else{

// if(node.value && node.value=='+')

if(node.nextElementSibling.value>1){

node.nextElementSibling.value--

v=node.nextElementSibling.value

if(v==1){

node.disabled=true

}

// 存储商品数量

var id=node.parentNode.parentNode.id

for(var good of skin_products){

if(id==good.id){

good.number=v

}

// 每个商品小计的方法

function subtotal(event) {

var node=event && event.target

// var id=node.parentNode.parentNode.id

// for(var g of skin_products){

// if(g.id==id){

// alert(g.price)

// }

// var price=；

var price=node.parentNode.previousElementSibling.innerText

var num=node.parentNode.children[1].value

node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2)

}

// 检验该商品是否选中

function checkedRow(event) {

event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true

// event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true

// var tbody=event.target.parentNode.parentNode.parentNode

// event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true

}

// 检查是否全选

function checkedAllRows() {

var chks=document.querySelectorAll('.good-check')

var flag=true

for(var ck of chks){

if(!ck.checked){

flag=false

break

}

document.querySelector('#chk_alla').checked=flag

}

// 统计商品总量和总价格

function totalAcount() {

var total=0

var total_price=0

var chks=document.querySelectorAll('.good-check')

for(var ck of chks){

if(ck.checked){

id=ck.parentNode.parentNode.id

for(var good of skin_products){

if(id==good.id){

total+=~~good.number

total_price=total_price+(good.number*good.price)

good.ischecked=true

}

document.querySelector('#good_count').innerText=total

document.querySelector('#goods_total').innerText=total_price

}

})()

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

<div>移入收藏夹</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

<div>移入收藏夹</div>

</div>

</body>

</html>

.container{

width: 1000px

margin-left: auto

margin-right: auto

color: #444444

}

.header{

margin: 8px

}

.shop-icon, .wangwang-icon, .promotion-icons span{

display:inline-block

width: 15px

height: 15px

background-color: rgb(117,192,241)

}

.promotion-icons span{

margin-right: 4px

}

.items{

border: 1px solid #ebe9e9

}

.item{

display: flex

margin: 8px

}

.item-img{

width:100px

height: 100px

display: inline-block

background-color: aquamarine

margin-left: 6px

margin-right: 6px

}

.item-name

{

display: flex

flex-direction: column

justify-content: space-between

}

.sku, .price,.item-price-total,.operation,.num-control{

margin-left: 18px

}

.num{

width: 18px

height: 15px

}

.num-control{

display: flex

align-items: baseline

}

.num-minus,.num-plus{

width: 18px

height: 22px

display: inline-block

background-color: #ebe9e9

}

.checkout{

display: flex

justify-content: space-between

}

.shop{

margin-bottom: 20px

margin-top: 30px

}

.goods,.freight,.checkout-button{

margin-left: 15px

}

.price-1{

text-decoration: line-through

color: gray

}

.check-num ,.total-price{

font-size: large

color: red

margin-left: 3px

margin-right: 3px

}

.checkout-button{

height: 30px

width: 50px

background-color: beige

}

.checkout{

margin-top: 15px

}

.item-name{

width: 25%

}

.item-price-total{

width: 5%

}

.sku{

width: 20%

}

function updatePrice(){

let items = document.querySelectorAll('.item')

let totalNum = 0

let totalPrice = 0

items.forEach(function(item){

if(item.querySelector('.item-checkbox').checked){

let num = item.querySelector('.num').value

totalNum = totalNum + parseInt(num)

let price = item.querySelector('.price-2').getAttribute('data-price')

totalPrice = totalPrice + parseFloat(price) * num

}

})

document.querySelector('.check-num').innerText= totalNum

document.querySelector('.total-price').innerText = totalPrice

}

window.onload=function(){

let itemCheckboxes = document.querySelectorAll('.item-checkbox')

itemCheckboxes.forEach(function(itemCheckbox){

itemCheckbox.onchange = function(){

updatePrice()

}

})

let minuses = document.querySelectorAll('.num-minus')

minuses.forEach(function(minus){

minus.onclick = function(event){

let num=minus.parentElement.querySelector('.num').value

if(parseInt(num)>1)

{

minus.parentElement.querySelector('.num').value=parseInt(num)-1

updatePrice()

}

})

let pluses = document.querySelectorAll('.num-plus')

pluses.forEach(function(plus){

plus.onclick = function(event){

let num=plus.parentElement.querySelector('.num').value

plus.parentElement.querySelector('.num').value=parseInt(num)+1

updatePrice()

}

})

}

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/8023888.html

求html购物车代码，，效果如图显示

发表评论

评论列表（0条）