Bootstrap

js实现购物车功能

将数据渲染到页面上

然后先将格式写出来，分析得出是由一个tr包4个td组成的，将表头用thead包起来，后面写tbody将内容包起来后面的两个td内分别包了两个按钮，最后面有3个输入框和2个按钮（确认和取消），样式要写为display：none

然后将数据以数组包对象的形式写在json文件内

[{
		"id": "1",
		"name": "包子",
		"price": "2",
		"num": "0"
	},
	{
		"id": "2",
		"name": "油条",
		"price": "3",
		"num": "0"
	},
	{
		"id": "3",
		"name": "鸡蛋",
		"price": "1.5",
		"num": "0"
	},
	{
		"id": "4",
		"name": "胡辣汤",
		"price": "3",
		"num": "0"
	},
	{
		"id": "5",
		"name": "小米粥",
		"price": "1",
		"num": "0"
	}
]

我们先将要用到的都获取过来，并且将data的作用域提到全局，并且每次添加的时候都是在id后面添加，设置一个最大的id为数据内在最大的id（确保唯一性），ee

			let data;
			let max_ID;
			// 获取弹窗
			let alerts = document.getElementById('ti_body');
			// 获取删除
			let dlt = document.getElementsByClassName('delete');
			// 获取数量+
			let append = document.getElementsByClassName('append');
			// 获取数量-
			let reduce = document.getElementsByClassName('reduce');
			// 获取tbody
			let tbody = document.getElementById('goods');
			// 获取三个添加时的输入框
			let addname = document.getElementById('name');
			let addprice = document.getElementById('price');
			let addnum = document.getElementById('number');
			// 获取三个编辑是的输入框
			let addnames = document.getElementById('names');
			let addprices = document.getElementById('prices');
			let addnums = document.getElementById('numbers');
			// 获取添加按钮
			let add = document.getElementsByClassName('add')[0];
			// 添加输入框区域
			let content = document.getElementsByClassName('content')[0];
			// 编辑输入框区域
			let contents = document.getElementsByClassName('contents')[0];
			// 取消按钮
			let off = document.getElementsByClassName('off')[0];
			// 获取商品数量
			let how = document.getElementsByClassName('how')[0];
			// 总价框
			let total = document.getElementById('total');
			// 总数量框
			let tot = document.getElementById('tot');
			// 获取json文件
			let xhr = new XMLHttpRequest();
			xhr.open('get', 'js/new_file.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					data = JSON.parse(text);
					max_ID = data[data.length - 1].id
					console.log(max_ID);
					console.log(data);
					render(data);
				}
			};

 将数据渲染到页面上，以字符串拼接的形式

			function render(data) {
				let str = ``;
				let num = 0;
				let count = 0;
				for (let i = 0; i < data.length; i++) {
					str += `<tr>
					<td>${data[i].name}</td>
					<td>${data[i].price}</td>
					<td><button class="reduce" onclick="cut_num(${i})">-</button> <span class="how">${data[i].num}</span> <button class="append" onclick="add_num(${i})">+</button>
					</td>
					<td><button class="edit" onclick="edit(${i})">编辑</button><button class="delete" onclick="del(${i})" >删除</button></td>
				</tr>`;
					num += data[i].num * 1;
					count += data[i].num * data[i].price;
				}
				total.innerHTML = count;
				tot.innerHTML = num;
				tbody.innerHTML = str;

			};

 然后给按钮+绑定点击事件，当每次点击时，对应的下标index的num++

function add_num(index) {
				data[index].num++;
				render(data);
			};

  然后给按钮-绑定点击事件，当每次点击时，对应的下标index的num--

function cut_num(index) {
				if (data[index].num > 0) {
					data[index].num--;
					render(data);
				};
			};

 点击删除时，运用splice的方法，从对应下标删除，并且删除一个

function del(index) {
				data.splice(index, 1);
				render(data);
			};

 点击添加的时候，应该先将隐藏的输入框和按钮显示出来，并且清空里面的值

	function add_show() {
				content.style.display = 'block'
				addname.value = '';
				addprice.value = '';
				addnum.value = '';
			};

 当点击取消时再将他们隐藏起来

function add_off() {
				content.style.display = 'none'
			}

 接下来写确定添加的点击事件，按实际情况来说的话，我们商品名称不能为空；并且商品价格不能为空，不能小于0；商品数量不能为空，不能小于0，商品的价格不能为空，不能小于0，并且是整数，如果不符合条件的话弹出弹窗提示用户，所以我们的添加的点击事件要写判断，并且添加时使最大的id++，渲染完成后再让输入框和按钮隐藏

判断如下：

// 添加确定
			function add_confirm() {
				// 判断，如果第一个name输入框内为空返回弹窗
				if (addname.value == "") {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个商品！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
					// 如果第二个为空或者数字小于0时返回弹窗
				} else if (addprice.value == "" || addprice.value < 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
					// 如果数量为空，并且小于0，并且当他不为整数时返回弹窗
				} else if (addnum.value == "" || addnum.value < 0 || addnum.value % 1 != 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else {
					max_ID++;
					data.push({
						id: max_ID,
						name: addname.value,
						price: addprice.value,
						num: addnum.value
					})
					console.log(data);
					render(data);
					content.style.display = 'none';
				}
			}

 编辑按钮点击的时候，我们应该获取到他在哪一行，并且获取哪一行的数据，将数据传递到输入框内，并且将这个id存起来

	function edit(i) {
				addnames.value = data[i].name;
				addprices.value = data[i].price;
				addnums.value = data[i].num;
				sessionStorage.setItem('edit_id', data[i].id)
				contents.style.display = 'block';
			};

 当我们编辑点确定的时候也需要判断，判断条件和上面的相同，如果所有的格式没有问题，那么将json中的id遍历一下，看看能不能找到和上面我们存的id相同，相同的话，再将内容进行替换并且重新渲染就好了

还有一种情况，我们点编辑后将这一条数据删除了，那么我们应该返回编辑失败

这种就先声明一个变量为false，当他在数据内能找到找个id将他变为true，这样就可以显示渲染，如果找不到那么就还是false，下面判断，如果当这个变量为false时，那么就返回弹窗，最后渲染时再将输入框隐藏即可

// 编辑判断
			function add_confirms() {
				if (addnames.value == "") {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个商品！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else if (addprices.value == "" || addprices.value < 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else if (addnums.value == "" || addnums.value < 0 || addnums.value % 1 != 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else {
					let a = false;
					for (let i = 0; i < data.length; i++) {
						if (data[i].id == sessionStorage.getItem('edit_id')) {
							data[i].name = addnames.value;
							data[i].price = addprices.value;
							data[i].num = addnums.value;
							a = true;
							break;
						}
					}
					if (a == false) {
						alerts.style.top = `0`
						alerts.innerHTML = `编辑失败！`
						setTimeout(function() {
							alerts.style.top = `-10%`
						}, 3000)
					}
					contents.style.display = 'none';
					render(data);
				}
			};

下面是全部的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style>
		#ti_body {
			top: -10%;
			left: 45vw;
			width: auto;
			height: 40px;
			background-color: red;
			color: white;
			text-align: center;
			line-height: 40px;
			padding: 3px 30px;
			border-radius: 0.25rem;
			position: fixed;
			z-index: 999;
			display: flex;
			justify-content: space-between;
		}
	</style>
	<body>
		<table border="1px" cellpadding="10px" style="border-collapse: collapse;">
			<thead>
				<tr>
					<th>商品名称</th>
					<th>商品价格（单位为元）</th>
					<th>商品数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="goods" style="text-align: center;">
				<tr>
					<td></td>
					<td>28</td>
					<td><button class="reduce">-</button> <span class="how">0</span> <button class="append">+</button>
					</td>
					<td><button class="edit">编辑</button><button class="delete">删除</button></td>
				</tr>
			</tbody>
			<footer>
				<tr style="text-align: center;">
					<td>总价：</td>
					<td id="total"></td>
					<td>总数量：</td>
					<td id="tot"></td>
				</tr>
			</footer>
		</table>
		<button class="add" onclick="add_show()">添加</button>
		<div style="display: none;" class="content">
			<input type="text" placeholder="请输入商品名称" id="name" />
			<input type="number" placeholder="请输入商品价格" id="price" />
			<input type="number" placeholder="请输入商品数量" id="number" />
			<br />
			<button onclick="add_confirm()">确认</button>
			<button class="off" onclick="add_off()">取消</button>
		</div>
		<div style="display: none;" class="contents">
			<input type="text" placeholder="请输入商品名称" id="names" />
			<input type="number" placeholder="请输入商品价格" id="prices" />
			<input type="number" placeholder="请输入商品数量" id="numbers" />
			<br />
			<button onclick="add_confirms()">确认</button>
			<button class="off" onclick="add_offs()">取消</button>
		</div>
		<div id="ti_body">
			<div id="ti_content">
				成功提示的文案
			</div>
			<div id="over" onclick="cancel()">×</div>
		</div>
		<script>
			let data;
			let max_ID;
			// 获取弹窗
			let alerts = document.getElementById('ti_body');
			// 获取删除
			let dlt = document.getElementsByClassName('delete');
			// 获取数量+
			let append = document.getElementsByClassName('append');
			// 获取数量-
			let reduce = document.getElementsByClassName('reduce');
			// 获取tbody
			let tbody = document.getElementById('goods');
			// 获取三个添加时的输入框
			let addname = document.getElementById('name');
			let addprice = document.getElementById('price');
			let addnum = document.getElementById('number');
			// 获取三个编辑是的输入框
			let addnames = document.getElementById('names');
			let addprices = document.getElementById('prices');
			let addnums = document.getElementById('numbers');
			// 获取添加按钮
			let add = document.getElementsByClassName('add')[0];
			// 添加输入框区域
			let content = document.getElementsByClassName('content')[0];
			// 编辑输入框区域
			let contents = document.getElementsByClassName('contents')[0];
			// 取消按钮
			let off = document.getElementsByClassName('off')[0];
			// 获取商品数量
			let how = document.getElementsByClassName('how')[0];
			// 总价框
			let total = document.getElementById('total');
			// 总数量框
			let tot = document.getElementById('tot');
			// 获取json文件
			let xhr = new XMLHttpRequest();
			xhr.open('get', 'js/new_file.json', true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					console.log(text);
					data = JSON.parse(text);
					max_ID = data[data.length - 1].id
					console.log(max_ID);
					console.log(data);
					render(data);
				}
			};
			// 渲染函数
			function render(data) {
				let str = ``;
				let num = 0;
				let count = 0;
				for (let i = 0; i < data.length; i++) {
					str += `<tr>
					<td>${data[i].name}</td>
					<td>${data[i].price}</td>
					<td><button class="reduce" onclick="cut_num(${i})">-</button> <span class="how">${data[i].num}</span> <button class="append" onclick="add_num(${i})">+</button>
					</td>
					<td><button class="edit" onclick="edit(${i})">编辑</button><button class="delete" onclick="del(${i})" >删除</button></td>
				</tr>`;
					num += data[i].num * 1;
					count += data[i].num * data[i].price;
				}
				total.innerHTML = count;
				tot.innerHTML = num;
				tbody.innerHTML = str;

			};
			console.log(max_ID);
			// 添加次数
			function add_num(index) {
				data[index].num++;
				render(data);
			};
			// 减少
			function cut_num(index) {
				if (data[index].num > 0) {
					data[index].num--;
					render(data);
				};
			};
			// 删除
			function del(index) {
				data.splice(index, 1);
				render(data);
			};
			// 添加显示
			function add_show() {
				content.style.display = 'block'
				addname.value = '';
				addprice.value = '';
				addnum.value = '';
			};
			// 取消
			function add_off() {
				content.style.display = 'none'
			}

			function add_offs() {
				contents.style.display = 'none'
			}

			// 添加确定
			function add_confirm() {
				// 判断，如果第一个name输入框内为空返回弹窗
				if (addname.value == "") {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个商品！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
					// 如果第二个为空或者数字小于0时返回弹窗
				} else if (addprice.value == "" || addprice.value < 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
					// 如果数量为空，并且小于0，并且当他不为整数时返回弹窗
				} else if (addnum.value == "" || addnum.value < 0 || addnum.value % 1 != 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else {
					max_ID++;
					data.push({
						id: max_ID,
						name: addname.value,
						price: addprice.value,
						num: addnum.value
					})
					console.log(data);
					render(data);
					content.style.display = 'none';
				}
			}
			// 编辑效果
			function edit(i) {
				addnames.value = data[i].name;
				addprices.value = data[i].price;
				addnums.value = data[i].num;
				sessionStorage.setItem('edit_id', data[i].id)
				contents.style.display = 'block';
			};
			// 编辑判断
			function add_confirms() {
				if (addnames.value == "") {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个商品！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else if (addprices.value == "" || addprices.value < 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else if (addnums.value == "" || addnums.value < 0 || addnums.value % 1 != 0) {
					alerts.style.top = `0`
					alerts.innerHTML = `输入无效，请输入一个数字！`
					setTimeout(function() {
						alerts.style.top = `-10%`
					}, 3000)
				} else {
					let a = false;
					for (let i = 0; i < data.length; i++) {
						if (data[i].id == sessionStorage.getItem('edit_id')) {
							data[i].name = addnames.value;
							data[i].price = addprices.value;
							data[i].num = addnums.value;
							a = true;
							break;
						}
					}
					if (a == false) {
						alerts.style.top = `0`
						alerts.innerHTML = `编辑失败！`
						setTimeout(function() {
							alerts.style.top = `-10%`
						}, 3000)
					}
					contents.style.display = 'none';
					render(data);
				}
			};
		</script>
	</body>
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
HTML-05新浪新闻-正文-排版
树形结构数据数据查询优化过程
Intellij IDEA2021.1创建Java web项目（超详细）
关于信息安全风险评估，你需要知道的
Hive 分析窗口函数
基于STM32单片机的预警区域移动人或车辆目标识别系统
gitlab 简单使用
JavaScript数组对象去重案例
SpringBoot详解
C++ stl库 手写 源码分析
;