Key points analysis:
1. When there is no item in the shopping cart, click Add item to add it.
2. There are two situations when you click to add an item when there are items in the shopping cart. The first is that there is no such item in the shopping cart that can be added. The second is that if the product you want to add to the shopping cart itself exists, then you need to judge the weight and accumulate the number of products.
3. Select all products or cancel.
When you select the Select All button, all the items in the shopping cart are selected. If you cancel one item, the Select All button will also be cancelled. Similarly, when you click all single items, the Select All button will also be selected.
4. One thing to note is that the product you added will have no effect if you click the delete button, because it does not contain click events.
Below is some code
don't forget to quote jquery
Any similarity is purely coincidental
<style type="text/css">
#cart {width: 800px;
margin: 0px auto;
text-align: center;
}
#cart input[type=button] {
border: none;
cursor: pointer;
background: none;
color: #ff6a00;
font-family: 'Microsoft YaHei';
}
table {
width: 100%;
border-collapse: collapse;
}
table th, td {
border: 1px solid #808080;
padding: 10px;
}
table img {
width: 100px;
height: 80px;
}
</style>
<script>
$(function () {
$("#products input").click(function () {
var img1 = $(this).parent().siblings ().eq(1).html(); //find the picture
var name = $(this).parent().siblings().eq(2).html();//find the product name
var price = $ (this).parent().siblings().eq(3).html();//Find the price
var flag = false;//The default is false (define a switch)
//Find the tr
in goods // Go Judging the items in the shopping cart, if there is no item in it, add the item.
if ($("#goods tr").length == 0) {
//Find the tr in the goods
var newtr = $('<tr><td><input type="checkbox"/></td><td>' + img1 + '</td><td>' + name + '</td>< td>' + price + '</td><td>1</td><td><input type="button" value="delete"/></td></tr>');
// put The new row is appended to the Add item.
$("#goods").append(newtr);
return;
}
//If there are goods in it, the goods in it will be weighed.
else {
//Every item in the loop
$("#goods tr").each(function () {
//Compare the name of the found item with the item name obtained above
if ($(this).
var count = $(this).children().eq(4).html();
//The number of items increases.
count++;
//Re-copy the number of items
$(this).children().eq(4).html(count);
//The switch is true
flag = true;
//Jump out of the loop
return false;
}
else {
/ / Default value if no loop in place.
flag = false;
}
});
}
//If it is the default value, it means that there is no such item in it, so add this item.
if (flag == false) {
var newtr = $('<tr><td><input type="checkbox"/></td><td>' + img1 + '</td><td>' + name + '</td><td>' + price + '</td><td>1</td><td><input type="button" value="delete"/></td></ tr>');
$("#goods").append(newtr);
} --Create
a click event
//Add a check box for a product (checked)
//The added product has no click event, so create a click event .
$("#goods").on("click", "input[type=checkbox]",
$("#goods input[type=checkbox]").each(function () {
//If the current object is not selected
if ($(this).prop("checked") == false) {
//The default is not checked Selected
fl = false;
}
});
//If the sub-buttons are all selected, the select all buttons are selected.
$(".checkAll").children().prop("checked", fl);
});
//Click the select all button
$(".checkAll").children().click(function () {
// All children are checked.
$("#goods tr").find("input[type=checkbox]").prop("checked", $(this).
// The second select all is also selected.
$(" .checkAll").children().prop("checked", $(this).prop("checked"));
});
});
//添加进去的按钮没有类似的点击事件，要进行手动添加点击事件。$("#goods ").on("click", "input[type=button]", function () {
//找到当前对象的父级的父级进行移除
$(this).parent().parent().remove();
});
//多选删除
$("tfoot ").find("input[type=button]").click(function () {
$("#goods tr").each(function () {
if ($("#goods input[type=checkbox]").prop("checked")) {
$(this).remove();
}
--使用三元一次表达式
$(" .checkAll").children().prop("checked", $(this).prop("checked")==false);
});
});
});
</script>
</head>
<body>
<div id="cart">
<h1>数码产品</h1>
<table id="products">
<thead>
<tr>
<th>商品编号</th>
<th>商品</th>
<th>名称</th>
<th>单价</th>
<th>好评</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>201711010000</td>
<td>
<img src="images/1.jpg" /></td>
<td>联想笔记本</td>
<td>5999.88</td>
<td>98%</td>
<td>
<input type="button" value="加入购物车" /></td>
</tr>
<tr>
<td>201711020000</td>
<td>
<img src="images/2.jpg" /></td>
<td>苹果手机</td>
<td>6999.88</td>
<td>99%</td>
<td>
<input type="button" value="加入购物车" /></td>
</tr>
<tr>
<td>201711030000</td>
<td>
<img src="images/3.jpg" /></td>
<td>戴尔电脑</td>
<td>7999.88</td>
<td>97%</td>
<td>
<input type="button" value="加入购物车" /></td>
</tr>
<tr>
<td>201711040000</td>
<td>
<img src="images/4.jpg" /></td>
<td>数码相机</td>
<td>9999.88</td>
<td>96%</td>
<td>
<input type="button" value="加入购物车" /></td>
</tr>
</tbody>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th class="checkAll">
<input type="checkbox" />全选</th>
<th>商品</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td class="checkAll">
<input type="checkbox" />全选</td>
<td colspan="5">
<input type="button" value="批量删除" /></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
希望这些能给大家带来帮助，欢迎大家提些宝贵的意见。