功能需求：
1.点击添加商品按钮会出现三个输入框（名称，价格，数量那三格，以及确认和取消按钮）。
2.点击确认后所输入的值会自动形成一行添加到表格中
3.点击编辑按钮时，会重新编辑这一行的数据信息
4.点击加号按钮时总价和总数会变化，减号按钮会显示
5.点击减号按钮时总价和总数会变化
6.点击删除按钮时这行都会被删除，并且总价和总数会减小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.7.1.min.js"></script>
<style>
.one {
display: flex;
justify-content: center;
align-items: center;
}
.one button {
width: 3vh;
height: 3vh;
margin: 0 5px;
}
.two button {
margin-left: 5px;
}
</style>
</head>
<body>
<table border="1px" cellpadding="5" cellspacing="0">
<thead align="center">
<tr>
<td><input type="checkbox" onclick="shoppingOne()" id="all" /></td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
</thead>
<tbody align="center">
<!-- <tr>
<td><input type="checkbox" /></td>
<td>聂聂脸</td>
<td>￥999</td>
<td class="one"><button>-</button>
<p>1</p><button>+</button>
</td>
<td class="two"><button>编辑</button><button>删除</button></td>
</tr> -->
</tbody>
<tfoot align="center">
<tr>
<td></td>
<td></td>
<td id="allPrice">总价:￥0</td>
<td id="allNum">总数:0</td>
<td></td>
</tr>
</tfoot>
</table>
<button onclick="addShop()">添加商品</button>
<div class="three" style="display: none;">
<input id="name" type="text" placeholder="请输入商品名称" />
<!-- onkeyup这代码是用户在输入框输入内容时，判断输入的是否是数字和小数点，如果不是就会被删除掉 -->
<input id="price" type="number" placeholder="请输入商品价格"
onkeyup="this.value = this.value.replace(/[^0-9\.]/g,'')" />
<input id="num" type="number" placeholder="请输入商品数量"
onkeyup="this.value = this.value.replace(/[^0-9\.]/g,'')" />
<button onclick="sub()">提交</button>
<button onclick="quxiao()">取消</button>
</div>
<script>
let xb = 0;
// 总价 总数
let allPrice, allNum;
// 用来判断是添加还是编辑的状态
let status = true;
// 假数据
let data = [{
"name": "长舌妇",
"price": "60",
"num": "1"
}, {
"name": "芭比公主",
"price": "22",
"num": "1"
}, {
"name": "大便超人",
"price": "30",
"num": "1"
}]
console.log(data);
// 调用渲染函数
rander();
// 渲染函数
function rander() {
let str = '';
for (let i = 0; i < data.length; i++) {
str += `
<tr>
<td><input type="checkbox" name="check" class="item" onclick="fn(${i})"/></td>
<td>${data[i].name}</td>
<td>${data[i].price}</td>
<td class="one">
<button onclick="jian(${i})">-</button>
<p class="text">${data[i].num}</p>
<button onclick="add(${i})">+</button>
</td>
<td class="two">
<button onclick="bianji(${i})">编辑</button>
<button onclick="deletes(${i})">删除</button>
</td>
</tr>
`;
}
document.getElementsByTagName('tbody')[0].innerHTML = str;
}
// 单
let check = document.getElementsByName('check');
// 全
let all = document.getElementById('all');
// 全选的点击事件
function shoppingOne() {
if (all.checked == true) {
for (let i = 0; i < check.length; i++) {
check[i].checked = true;
}
} else {
for (let i = 0; i < check.length; i++) {
check[i].checked = false;
}
}
}
// 单选的点击事件
let arr = [];
function fn(i) {
for (let a = 0; a < check.length; a++) {
if (check[a].checked == false) {
all.checked = false;
arr.push(data[i]);
return;
}
}
console.log(arr);
all.checked = true;
}
// 加事件
function add(i) {
data[i].num++;
// 数量渲染到页面
$(".text").eq(i).html(data[i].num);
// 调用总价函数
allPrices();
}
// 减事件
function jian(i) {
// 判断商品数量大于1时减
if (data[i].num > 1) {
data[i].num--;
// 数量渲染到页面
$(".text").eq(i).html(data[i].num);
// 数量小于1时删除这个商品
} else {
// 第一个参数是删谁，第二个是删几个
data.splice(i, 1);
// 渲染页面
rander();
}
// 调用总价函数
allPrices();
}
// 总价函数
allPrices()
function allPrices() {
allPrice = 0;
allNum = 0;
for (let i = 0; i < data.length; i++) {
allPrice += parseFloat(data[i].price) * parseFloat(data[i].num);
allNum += parseFloat(data[i].num);
}
$("#allPrice").html(`总价:￥${allPrice}`);
$("#allNum").html(`总数:${allNum}`);
}
// 添加商品点击事件
function addShop() {
name.value = "";
price.value = "";
num.value = "";
$(".three").css("display", "block");
// 点击添加商品时为true
status = true;
}
// 取消点击事件
function quxiao() {
// 让输入框隐藏
$(".three").css("display", "none");
// 并且清空输入框的值
name.value = "";
price.value = "";
num.value = "";
}
// 获取三个输入框
let name = document.getElementById('name');
let price = document.getElementById('price');
let num = document.getElementById('num');
// 编辑点击事件
function bianji(i) {
$(".three").css("display", "block");
// 点击是编辑是为false
status = false;
xb = i;
name.value = data[i].name;
price.value = data[i].price;
num.value = data[i].num;
}
// 删除事件
function deletes(i) {
data.splice(i, 1);
rander();
}
// 提交的点击事件
function sub() {
// 判断三个输入框不等于空的时候
if (name.value != "" && price.value != "" && num.value != "") {
// 判断点击的是添加商品时
if (status == true) {
// 往数组里面添加一个对象（对象的内容是输入框的值）
data.push({
name: name.value,
price: price.value,
num: num.value
})
console.log(data);
// 否则就是点击的是编辑并且回显
} else {
data[xb].name = name.value;
data[xb].price = price.value;
data[xb].num = num.value
}
// 输入框不为空（添加成功过后渲染页面，隐藏并且清空input；）
rander();
allPrices();
name.value = "";
price.value = "";
num.value = "";
$(".three").css("display", "none");
// 否则就提示先填写
} else {
alert("请填写内容！");
}
rander();
allPrices();
}
</script>
</body>
</html>