概述
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东商城 - 购物车</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
$(".del").click(function(){
$(".tr_0").remove();
})
$("body").on("click", ".del", function() {
$(this).parent().parent().remove();
});
$(".add").click(function() {
var $newPro = $(
"<tr><td><input name=''type='checkbox' value=''/></td><td><img src='images/computer.jpg' class='products'/><a href='#'>联想笔记本电脑</a></td><td>￥3189元</td><td><img src='images/subtraction.gif'width='20'height='20'><input type='text' class='quantity' value='1'><img src='images/add.gif' width='20' height='20'></td><td><a href='#' class='del'>删除</a></td></tr>"
);
$("table").append($newPro);
})
})
</script>
</head>
<body>
<header></header>
<div class="content">
<div class="t-head">
<h4>全部商品</h4>
</div>
<div class="sct">
<div class="thead">
<div><input type="checkbox" class="selectAll" /></div>
<div>全选</div>
<div>商品</div>
<div>单价</div>
<div>数量</div>
<div>小计</div>
<div>操作</div>
</div>
<div id="listBox">
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/product5.jpg" height="100" /></div>
<div>光明 纯牛奶250mL*24盒</div>
<div>¥<span class="price">58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
</div>
<div class="countBox">
<div><input type="checkbox" class="selectAll" /></div>
<div>全选 <a href="#" id="delcheck">删除选中的商品</a></div>
<div>
<span class="gray">总价:</span> ￥<span id="totalprice">0.00</span>
</div>
<div>去结算</div>
</div>
</div>
</div>
<div class="p-head">
<h5>猜你喜欢</h5>
</div>
<div class="productsBox">
<div class="product">
<img src="img/product1.jpg" height="100" />
<p>
新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15
i5-10210U 16 512G独显灰
</p>
<div>¥5239.00</div>
<button>
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
<div class="product">
<img src="img/product2.jpg" height="100" />
<p>
新款Huawei/华为折叠手机mates xs
5g版大屏双屏全面屏双面屏官方旗舰店对折手机可折叠屏 Mate XS折叠
</p>
<div>¥20980.00</div>
<button>
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
<div class="product">
<img src="img/product3.jpg" height="100" />
<p>
华为智慧屏V55i-A 55英寸 HEGE-550 4K超薄全面屏液晶电视机 多方视频通话
AI升降摄像头 4GB+64GB 星际黑
</p>
<div>¥3999.00</div>
<button>
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
<div class="product">
<img src="img/product4.jpg" height="100" />
<p>
华为荣耀智能手表WATCH Magic运动男女2Pro手环定位NFC支付
陶瓷版（流沙杏）
</p>
<div>¥699.00</div>
<button>
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
</div>
<footer></footer>
</body>
</html>
根据提醒打的script代码如下
<script>
function check(){
var oInput=document.getElementsByName("check");
for(var i=0;i<oInput.length;i++){
if(document.getElementById("all").checked==true){
oInput[i].checked=true;
}else{
oInput[i].checked=false;
}
}
}
</script>
<script>
$(function(){
$("#a2").click(function(){
var jd1=$(
"<div class='item' id='s1'>"
+"<div>"+"<input type='checkbox' name='check' id='all'/>"+"</div>"
+"<div>"+"<img src='img/product1.jpg' height='100' />"+"</div>"
+"<div>"+"新品华为笔记本MateBook"+"</div>"
+"<div>"+"¥"+"<span class='price'>"+"5239.00"+"</span>"+"</div>"
+"<div>"+"<input type='number' value='1' min='1' />"+"</div>"
+"<div>"+"¥"+"<span class='subtotal2'>"+"5239.00"+"</span>"+"</div>"
+"<div>"+"<a href='#' class='del'>删除</a>"+"</div>"
+"</div>"
);
$("#listBox").append(jd1);
});
$("#a3").click(function(){
var jd2=$(
"<div class='item' id='s1'>"
+"<div>"+"<input type='checkbox' name='check' id='all'/>"+"</div>"
+"<div>"+"<img src='img/product2.jpg' height='100' />"+"</div>"
+"<div>"+"华为折叠手机mates"+"</div>"
+"<div>"+"¥"+"<span class='price'>"+"20980.00"+"</span>"+"</div>"
+"<div>"+"<input type='number' value='1' min='1' />"+"</div>"
+"<div>"+"¥"+"<span class='subtotal2'>"+"20980.00"+"</span>"+"</div>"
+"<div>"+"<a href='#' class='del'>删除</a>"+"</div>"
+"</div>"
);
$("#listBox").append(jd2);
});
$("#a4").click(function(){
var jd3=$(
"<div class='item' id='s1'>"
+"<div>"+"<input type='checkbox' name='check' id='all'/>"+"</div>"
+"<div>"+"<img src='img/product3.jpg' height='100' />"+"</div>"
+"<div>"+"4K超薄全面屏液晶电视机"+"</div>"
+"<div>"+"¥"+"<span class='price'>"+"3999.00"+"</span>"+"</div>"
+"<div>"+"<input type='number' value='1' min='1' />"+"</div>"
+"<div>"+"¥"+"<span class='subtotal2'>"+"3999.00"+"</span>"+"</div>"
+"<div>"+"<a href='#' class='del'>删除</a>"+"</div>"
+"</div>"
);
$("#listBox").append(jd3);
});
$("#a5").click(function(){
var jd4=$(
"<div class='item' id='s1'>"
+"<div>"+"<input type='checkbox' name='check' id='all'/>"+"</div>"
+"<div>"+"<img src='img/product4.jpg' height='100' />"+"</div>"
+"<div>"+"华为荣耀智能手表WATCH"+"</div>"
+"<div>"+"¥"+"<span class='price'>"+"699.00"+"</span>"+"</div>"
+"<div>"+"<input type='number' value='1' min='1' />"+"</div>"
+"<div>"+"¥"+"<span class='subtotal2'>"+"699.00"+"</span>"+"</div>"
+"<div>"+"<a href='#' class='del'>删除</a>"+"</div>"
+"</div>"
);
$("#listBox").append(jd4);
});
});
function add(productID){
switch(productID){
case 1:
var $newPro=$("<div class='item'><div><input type="checkbox" name="check" /></div></div>")
break;
case 2:
var $newPro=$("<div class='item'><div><input type="checkbox" name="check" /></div></div>")
break;
case 3:
var $newPro=$("<div class='item'><div><input type="checkbox" name="check" /></div></div>")
break;
case 4:
var $newPro=$("<div class='item'><div><input type="checkbox" name="check" /></div></div>")
break;
}
}
</script>
最后
以上就是淡定泥猴桃为你收集整理的京东购物车制作的全部内容，希望文章能够帮你解决京东购物车制作所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复