下面是我自己写的一个简单的demo,希望对你能有所帮助!
里面包含添加商品时动态显示商品价格,避免重复添加商品,以及批量删除商品。我是在HbuilderX上写的,代码复制后可直接运行。
(如果写的有哪些不好的地方请指出来,或者有什么疑惑也可以在评论区评论我会尽快回复的,2333!!!)
下面是效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQ-demo</title>
<link rel="stylesheet" href="style.css" />
<script src="jquery.js"></script>
</head>
<body>
<div class="container">
<div class="header"><h1>购物车</h1></div>
<div class="toolbar">
商品名称:
<select id="sel_name">
<option value="6.2">苹果</option>
<option value="7.3">香蕉</option>
<option value="20.8">榴莲</option>
<option value="8.5">橙子</option>
<option value="10.5">西瓜</option>
</select>
商品价格:
<input id="txt_price" type="number" id="txt_price" placeholder="商品价格" min="1" max="100" disabled />
商品数量:
<input id="txt_number" type="number" id="txt_count" placeholder="商品数量" min="1" max="100" value="1" />
<button id="btn_add" class="btn btn-primary">添加</button>
<button id="btn_delete" class="btn btn-danger">批量删除</button>
</div>
<table class="table" id="chart">
<thead>
<tr>
<th><input type="checkbox" id="select_all" /></th>
<th>商品名称</th>
<th>商品数量</th>
<th>单价</th>
<th>总价</th>
<th></th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
<script>
var oldCount = null;
//将商品下拉框中的价格更新到“商品价格”文本框中去
$("#txt_price").val($("#sel_name").val());
$("#sel_name").change(function(){
$("#txt_price").val($("#sel_name").val());
});
//添加商品
$("#btn_add").click(function(){
var name = $("#sel_name > option:selected").text(),
price =parseFloat($("#sel_name").val()).toFixed(2),
count =parseInt($("#txt_number").val()),
flag = false,//默认为false
total =parseFloat(price * count).toFixed(2);//parseFloa().toFixed(2)精确到小数点第二位
//循环里面的每一个商品
$("tbody > tr").each(function () {
//找到商品的名称与上面获取到的商品名称进行对比
if ($(this).children().eq(1).text() == name) {
// alert($(this).children().eq(1).html());
//找到此商品的数量
var oldCount =parseInt($(this).children().eq(2).text());
//商品数量增加。总价跟着变化
count+=oldCount;
total = count*price;
//对商品的数量和总价进行重新复制
$(this).children().eq(2).text(count);
$(this).children().eq(4).text(parseFloat(total).toFixed(2));
//开关为true
flag = true;
//跳出循环
return false;
}
});
//如果为默认值也就是说里面没有此商品,所以添加此商品。
if (flag == false) {
$("#chart > tbody").append(`<tr>
<td><input name="checkone" type="checkbox" /></td>
<td>${name}</td>
<td>${count}</td>
<td>${price}</td>
<td>${total}</td>
<td><button class="btn btn-danger btn-small">×</button></td>
</tr>`);
}
});
//删除商品
$("#chart").on("click", "button", function(){
$(this).parent().parent().remove();
});
//批量删除
$("#btn_delete").on('click', function() {
//判断如果没选中 不让删除
if($('[name="checkone"]:checked').length==0){
alert("请选择要删除的内容!");
return;
}
var dl = confirm("确认要删除选中的内容吗?");
if(dl==true){
alert("确认删除!");
$("tbody > tr").each(function () {
if ($(this).children().find("input[type=checkbox]").prop("checked")) {
$(this).remove();
}
})
}else if(dl==false){
alert("取消删除!");
}
});
//点击全选按钮
$("#select_all").click(function () {
//子项全部被选中。
$("tbody > tr").children().find("input[type=checkbox]").prop("checked", $(this).prop("checked"));
})
</script>
</body>
</html>
#style.css:
body{
margin: 0;
}
.container{
width: 90%;
min-width: 900px;
margin: auto;
}
.header{
height: 50px;
line-height: 50px;
border-bottom: 1px solid silver;
}
.toolbar{
height: 50px;
display: flex;
align-items: center;
font-size: 14px;
}
.toolbar > *{
margin: 0 8px;
}
/文本框/
select, input[type=‘text’], input[type=‘number’]{
height: 30px;
box-sizing: border-box;
border-radius: 15px;
border: none;
outline: none;
box-shadow: 0 1px 2px 1px rgba(127, 127, 127, 0.3);
padding: 0 15px;
}
select, input[type=‘text’]{
width: 300px;
}
input[type=‘number’]{
width: 100px;
}
select:focus, input[type=‘text’]:focus, input[type=‘number’]:focus{
box-shadow: 0 1px 2px 1px rgba(30, 144, 255, 0.6);
}
/按钮/
.btn{
min-width: 80px;
height: 30px;
border-radius: 4px;
border: none;
background-color: silver;
cursor: pointer;
outline: none;
}
.btn:hover{
opacity: 0.9;
}
.btn-primary{
background-color: #6495ED;
color: white;
}
.btn-primary:active{
background-color: #84A5FF;
}
.btn-danger{
background-color: #DC143C;
color: white;
}
.btn-danger:active{
background-color: #FC244C;
}
.btn-small{
min-width: 40px;
height: 20px;
font-size: 12px;
}
/表格/
.table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 14px;
}
.table th, .table td{
height: 36px;
padding: 0 5px;
text-align: center;
border: 1px solid #f0f0f0;
}
#chart tr > th:nth-child(1){
width: 80px;
}