啥也不说。直接上代码！！！！
有小伙伴想要代码！全部代码在最后放
第一步。引入script src=“jquery-3.3.1.min.js”
第二步。先写一个$ (function() {})函数。这里要说一下。这个$(function() {})是最大的函数。包住全部。下面的图片是加入购物车。再下面是分部
下面这些才是函数里面的东西、
添加购物车！！！！
第三步。先找到加入购物车的a标签。然后分别找到a标签父亲的兄弟的文本——图片、商品名称、折扣价
//获取购物车标签#goods tr td a
$('#goods tr td a').click(function()
{
//获取a标签父亲的第二个兄弟的文本——图片
var tup = $(this).parent().siblings().eq(1).html();
//获取a标签父亲的第二个兄弟的文本——商品名称
var name = $(this).parent().parent().children().eq(2).html();
//获取a标签父亲的第二个兄弟的文本——折扣价
var jin = $(this).parent().siblings().eq(3).html();
这是判重。还是一个点击事件的代码
//判重判断商品在购物车里是否存在
var flag = true;
$('#cart tr').each(function()
{
//判断name在新添加的name是否一致。这里的name是上面获取的
if ($(this).children().eq(2).text() == name)
{
//已经存在
flag = false;
//更新原来的数量
var num = parseFloat($(this).children().eq(3).text());
//更新原来的小计
var ji = parseFloat($(this).children().eq(5).text());
//计算数量
$(this).children().eq(3).text(num + 1);
//计算小计
$(this).children().eq(5).text((num + 1) * jin);
}
});
//创建7个单元格
if (flag)
{
var t1 = "<td><input type='checkbox'></td>";//选中
var tp = "<td>" + tup + "</td>";//图片
var mc = "<td>" + name + "</td>";//名称
var shu = "<td>" + 1 + "</td>"//数量
var jg = "<td>" + jin + "</td>"//价格
var xj = "<td>" + jin + "</td>"//小计
var sc = "<td><a href='#'>删除</a></td>"//删除按钮
//创建行
var tr =
"<tr>"
+ t1 + "" + tp + "" + mc + ""
+ shu + "" + jg + "" + xj + ""
+ sc +
"</tr>"
//追加这一行
$("#cart").append(tr);
}
//增加 数量和总计
var num = 0;//数量
var sum = 0;//小计
//购物车行数循环
$("#cart tr").each(function()
{
//购物车里面的 【数量】的文本。数量变化
num += parseFloat($(this).children().eq(3).text());
//购物车里面的【小计】的文本。小计就变化，价格不变
sum += parseFloat($(this).children().eq(5).text());
});
//从上面找到他们的id
$("#allNum").text(num);
$("#allMoney").text(sum);
});
#cart就是添加购物车商品追加的容器。tr就是刚才创建的行
到这里添加就完成了！！！
下面就是全选
‘#carsTable input[type=“checkbox”]’——就是全选按钮
‘#cart input[type=“checkbox”]’——就是单选选中按钮
反选。中间有bug。不过小事情
删除！！
结束！拜拜！！！
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="./jquery-3.3.1.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
table {
width: 1000px;
border: 1px solid red;
margin: 0px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid red;
height: 40px;
}
/* 对话框的样式设置 */
/*遮罩层 */
#mask {
background-color: gray;
position: absolute;
left: 0;
top: 0;
z-index: 100;
opacity: 0.3;
filter: alpha(opacity=30);
}
/*对话框整体布局 */
#dialog {
background-color: #fff;
border: 3px solid orange;
height: 200px;
position: absolute;
width: 300px;
z-index: 101;
display: none;
position: absolute;
left: 600px;
top: 300px;
}
/*对话框头部背景 */
#dialog div#title {
background: #cccccc;
overflow: hidden;
}
/*对话框头部中的关闭按钮布局 */
#dialog p.close {
float: right;
padding-right: 10px;
height: 24px;
line-height: 24px;
width: 40px;
cursor: pointer;
color: red;
}
/* 对话框中提示部分的布局 */
#dialog div#infor {
text-align: center;
height: 80px;
line-height: 80px;
}
/*对话框中确认按钮的布局 */
#dialog div#sure {
text-align: center;
height: 30px;
line-height: 30px;
}
/* 商品图片大小 */
table img {
width: 90px;
height: 80px;
}
/* 结账按钮 */
#buyAll {
width: 120px;
height: 50px;
color: red;
font-size: 30px;
}
table a {
text-decoration: none;
color: red;
}
table a :HOVER {
color: blue;
}
.newClass {
border: 5px solid yellow;
}
#menuDiv {
height: 100px;
margin: 0 auto;
width: 800px;
}
#menuDiv a {
text-decoration: none;
color: black;
}
#menuDiv a:HOVER {
color: orange;
}
#menuDiv ul {
list-style: none;
position: absolute;
}
#menuDiv ul li {
width: 100px;
height: 40px;
line-height: 40px;
float: left;
border: 1px solid red;
text-align: center;
position: relative;
}
#menuDiv li.menuList ul {
display: none;
}
caption {
color: black;
font-size: 30px;
margin-bottom: 10px;
}
button {
width: 90px;
height: 30px;
border-width: 0px;
border-radius: 3px;
background: #1E90FF;
cursor: pointer;
outline: none;
font-family: Microsoft YaHei;
color: white;
font-size: 17px;
}
button:HOVER {
background: #5599FF;
}
.f{
position: absolute;
display:none;
}
</style>
</head>
<body>
<div id="menuDiv">
<ul>
<li><a href="#">首页 <ul class="f"><li>首页</li></ul></a></li>
<li><a href="#">家纺家居<ul class="f"><li>首页</li></ul></a></li>
<li><a href="#">智能家电<ul class="f"><li>首页</li></ul></a></li>
<li><a href="#">手机电脑<ul class="f"><li>首页</li></ul></a></li>
<li><a href="#">食品生鲜<ul class="f"><li>首页</li></ul></a></li>
</ul>
</div>
<table id="goods">
<caption>双十一选购会</caption>
<tr>
<th>编号</th>
<th>图片</th>
<th>商品名称</th>
<th>折扣价(￥)</th>
<th>抢抢抢！</th>
</tr>
<tr>
<td>1001</td>
<td><img src="../imgs/goods1.png"></img>
</td>
<td>闪迪64G存储卡行车记录仪</td>
<td>74</td>
<td><a href="#">加入购物车</a>
</td>
</tr>
<tr>
<td>1002</td>
<td><img src="../imgs/goods2.png"></img>
</td>
<td>天际隔水电炖锅</td>
<td>119</td>
<td><a href="#">加入购物车</a>
</td>
</tr>
<tr>
<td>1003</td>
<td><img src="../imgs/goods3.png"></img>
</td>
<td>创维55寸大屏电视</td>
<td>3699</td>
<td><a href="#">加入购物车</a>
</td>
</tr>
<tr>
<td>1004</td>
<td><img src="../imgs/goods4.png"></img>
</td>
<td>美玲电冰箱</td>
<td>2999</td>
<td><a href="#">加入购物车</a>
</td>
</tr>
<tr>
<td>1005</td>
<td><img src="../imgs/goods5.png"></img>
</td>
<td>大疆MAVICPRO无人机</td>
<td>3000</td>
<td><a href="#">加入购物车</a>
</td>
</tr>
</table>
<table id="carsTable" style="margin-top: 90px">
<caption>购物车</caption>
<thead>
<tr>
<th><input type="checkbox" />全选</th>
<th>图片</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="cart">
</tbody>
<tfoot>
<tr>
<td colspan="6">数量是：<span id="allNum">0</span>个 价格是：￥<span id="allMoney">0</span>元</td>
<td colspan="1"><button id="dellAll">批量删除</button></td>
</tr>
</tfoot>
</table>
<script>
$(function() {
//获取a标签
var $li = $("#menuDiv>ul>li>a");
//给li注册鼠标经过事件，让自己的ul显示出来
$li.mouseenter(function () {
//找到所有的儿子，并且还得是ul
$(this).children("ul").stop().slideDown(200);
});
$li.mouseleave(function () {
$(this).children("ul").stop().slideUp(200);
});
})
$(function() {
//获取购物车标签#goods tr td a
$('#goods tr td a').click(function() {
//获取a标签父亲的第二个兄弟的文本——图片
var tup = $(this).parent().siblings().eq(1).html();
//获取a标签父亲的第二个兄弟的文本——商品名称
var name = $(this).parent().parent().children().eq(2).html();
//获取a标签父亲的第二个兄弟的文本——折扣价
var jin = $(this).parent().siblings().eq(3).html();
//判重判断商品在购物车里是否存在
var flag = true;
$('#cart tr').each(function() {
//判断name在新添加的name是否一致
if ($(this).children().eq(2).text() == name) {
//已经存在
flag = false;
//更新原来的数量和小计
var num = parseFloat($(this).children().eq(3).text());
var ji = parseFloat($(this).children().eq(5).text());
$(this).children().eq(3).text(num + 1);
$(this).children().eq(5).text((num + 1) * jin);
}
});
//创建7个单元格
if (flag) {
var t1 = "<td><input type='checkbox'></td>";
var tp = "<td>" + tup + "</td>";
var mc = "<td>" + name + "</td>";
var shu = "<td>" + 1 + "</td>"
var jg = "<td>" + jin + "</td>"
var xj = "<td>" + jin + "</td>"
var sc = "<td><a href='#'>删除</a></td>"
var tr = "<tr>" + t1 + "" + tp + "" + mc + "" + shu + "" + jg + "" + xj + "" + sc + "</tr>"
$("#cart").append(tr);
}
//增加总计
var num = 0;
var sum = 0;
$("#cart tr").each(function() {
num += parseFloat($(this).children().eq(3).text());
sum += parseFloat($(this).children().eq(5).text());
});
$("#allNum").text(num);
$("#allMoney").text(sum);
});
//全选
$('#carsTable input[type="checkbox"]').click(function() {
//attr,prop
if ($(this).prop('checked')) {
$('#cart input[type="checkbox"]').each(function() {
$(this).prop('checked', true)
});
} else {
$('#cart input[type="checkbox"]').each(function() {
$(this.prop('checked', false))
});
}
})
//反选
$("#cart").on("click", "input[type='checkbox']", function() {
var flag = true;
$("#cart input[type='checkbox']").each(function() {
if ($(this).prop("checked") == false) {
$("#carsTable thead input[type='checkbox']").prop("checked", false);
flag = false;
}
});
if (flag) {
$("#carsTable thead input[type='checkbox']").prop("checked", true);
}
})
//删除
$('#carsTable').on("click", "a", function() {
$(this).parent().parent().remove();
zz();
});
//批量删除
$('#dellAll').click(function() {
$("#cart input[type='checkbox']").each(function() {
if ($(this).prop('checked') == true) {
$(this).parent().parent().remove();
zz();
};
});
});
});
</script>
</body>
</html>
```javascript
在这里插入代码片
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
