JavaScript数据筛选和模糊搜索

派大鑫的工作室

于 2024-07-25 21:20:20 发布

阅读量383

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Cc040909/article/details/140700325

版权

HTML样式：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>数据筛选</title>
	<link rel="stylesheet" href="./css/data.css">
</head>

<body>
	<div class="billboard">
		<h2>富豪榜</h2>
	</div>
	<input type="text" class="input" placeholder="搜索..." oninput="seach(value)">
	<table class="Serial">

		<thead>
			<tr class="">
				<td>序号</td>
				<td>姓名</td>
				<td onclick="sorts()">富豪榜</td>
			</tr>
		</thead>

		<tbody>

		</tbody>
	</table>

	<script src="./js/datas.js"></script>
</body>

</html>

JS样式：

let data;

let xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('get', './js/data.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {
	if (xhr.readyState == 4 && xhr.status == 200) {
		data = JSON.parse(xhr.responseText);
		// 调用展示商品的函数
		console.log(data);
		// 调用函数
		show(data);
	}
};


function show(data) {
	// 声明一个str
	let str = ``;
	// for循环 循环假数据的长度
	for (let i = 0; i < data.length; i++) {
		// console.log(data);
		// 进行字符串拼接 将假数据获取过来
		str +=
			`<tr style="background-color:pink;">
					<td>${i + 1}</td>
					<td>${data[i].name}</td>
					<td>${data[i].ranking}</td>
				</tr>
			`
	} if (data.length == 0) {
		str +=
			`<tr>
			<td colspan="3">暂无数据</td>
			</tr>`
	}
	// 将获取到的数据插入到页面当中
	document.getElementsByTagName('tbody')[0].innerHTML = str;
}




function sorts() {
	// 进行if判断 存储一个数值
	if (sessionStorage.getItem("name") == 1) {
		data.sort((a, b) => a.ranking - b.ranking);
		sessionStorage.removeItem("name");
	} else {
		data.sort((a, b) => b.ranking - a.ranking);
		sessionStorage.setItem("name", "1");
	}
	// 调用渲染函数
	show(data);
}


// 模糊搜索
function seach(target) {
	let arr = [];
	for (let i = 0; i < data.length; i++) {
		// 进行判断
		if (data[i].name.indexOf(target) >= 0 || String(data[i].ranking).indexOf(target) >= 0) {
			// push放入
			arr.push(data[i]);
		}
		console.log(arr);
		// 渲染函数
		show(arr);
	}
}

JSON假数据：

	[{
		"name": "老王",
		"ranking": 8010
	},
	{
		"name": "老张",
		"ranking": 9000
	}

]

希望能帮到你们哟！

派大鑫的工作室

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫