商品查询系统

最新推荐文章于 2024-10-12 06:14:00 发布

清蒸大闸蟹-

最新推荐文章于 2024-10-12 06:14:00 发布

阅读量321

点赞数 5

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_73749341/article/details/139326770

版权

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			table {
				width: 400px;
				border: 1px solid #000;
				border-collapse: collapse;
				margin: 0 auto;
			}
			
			td,
			th {
				border: 1px solid #000;
				text-align: center;
			}
			
			input {
				width: 50px;
			}
			
			.search {
				width: 600px;
				margin: 20px auto;
				
			}
		</style>
	</head>

	<body>
		<div class="search">
			按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索 
			</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
		</div>
		<table>
			<thead>
				<tr>
					<th>id</th>
					<th>产品名称</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
		<script>
			
			var data = [{
				id: 1,
				pname: '少年读史记',
				price: 399
			}, {
				id: 2,
				pname: '神奇校车',
				price: 999
			}, {
				id: 3,
				pname: '画给孩子的中国史',
				price: 999
			}, {
				id: 4,
				pname: '少年读山海经',
				price: 1999

			}, {
				id: 5,
				pname: '铃木绘本系列宫西达',
				price: 1999

			}, {
				id: 6,
				pname: '窗边的小豆豆',
				price: 1999

			}, {
				id: 7,
				pname: '东野奎宇：我的老师是侦探',
				price: 1999

			}, {
				id: 8,
				pname: '万物由来科学绘本',
				price: 1999

			}, {
				id: 9,
				pname: '夏洛特的网',
				price: 1999

			}, {
				id: 10,
				pname: '薛宇翔和闫佳琪的爱情故事',
				price: 9999

			}];

			var tbody = document.querySelector('tbody');
			var search_price = document.querySelector('.search-price');
			var start = document.querySelector('.start');
			var end = document.querySelector('.end');
			var product = document.querySelector('.product');
			var search_pro = document.querySelector('.search-pro');
			setDate(data);

			function setDate(mydata) {

				tbody.innerHTML = '';
				mydata.forEach(function(value) {

					var tr = document.createElement('tr');
					tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
					tbody.appendChild(tr);
				});
			}

			search_price.addEventListener('click', function() {

				var newDate = data.filter(function(value) {
					return value.price >= start.value && value.price <= end.value;
				});
				console.log(newDate);
				setDate(newDate);
			});

			search_pro.addEventListener('click', function() {
				var arr = [];
				data.some(function(value) {
					if(value.pname === product.value) {

						arr.push(value);
						return true;
					}
				});

				setDate(arr);
			})
		</script>
	</body>

</html>