前端技术(18) : 表格内容搜索

Lxinccode

于 2024-03-06 17:42:18 发布

阅读量373

点赞数 6

分类专栏：前端文章标签：前端 javascript 开发语言表格内容搜索

本文链接：https://blog.csdn.net/lxinccode/article/details/136512918

版权

前端专栏收录该内容

62 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 表格 */
			/* 表格外观设置 */
			table {
				width: 100%;
				/* 表格宽度 */
				border-collapse: collapse;
				/* 合并单元格边框 */
				margin: 0;
				/* 表格外边距 */
				padding: 0;
				/* 表格内边距 */
				background: white;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				/* 轻微的阴影 */
			}

			/* 表头样式 */
			thead {
				background-color: #aaaaff;
				/* 背景颜色 */
				color: white;
				/* 字体颜色 */
			}

			/* 表头单元格样式 */
			thead th {
				font-weight: bold;
				/* 字体加粗 */
				padding: 15px;
				/* 填充 */
				text-align: left;
				/* 左对齐文本 */
			}

			/* 表格内容样式 */
			tbody td {
				padding: 15px;
				/* 填充 */
				text-align: left;
				/* 左对齐文本 */
				border-bottom: 1px solid #ddd;
				/* 底部边框 */
			}

			/* 鼠标悬停效果 */
			tbody tr:hover {
				background-color: #f5f5f5;
				/* 悬停背景颜色 */
			}

			/* 条纹效果 */
			tbody tr:nth-child(even) {
				background-color: #f9f9f9;
				/* 条纹颜色 */
			}
		</style>
	</head>
	<body>
		<span style="">
			<button style=";height: 20px;font-size: 12px;cursor:pointer;" onclick="resetSearch()">重置</button>
			<input id="searchTxt" placeholder="搜素" style="height: 15px;font-size: 10px;width: 150px;"
				oninput="searchStr()"> [<span style="font-weight: bold;" id="dsize"></span>]

		</span>
		<table id="table1">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Position</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>John Doe</td>
					<td>Developer</td>
					<td>1100</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Jane Smith</td>
					<td>Designer</td>
					<td>$1500</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		// 获取表格元素
		var table = document.getElementById("table1");
		// 获取所有行
		var rows = table.rows;
		document.getElementById("dsize").innerHTML = rows.length - 1

		function resetSearch() {
			document.getElementById('searchTxt').value = ''
			search('')
		}

		function searchStr() {
			let str = document.getElementById('searchTxt').value
			search(str)
		}

		function search(str) {
			console.log()
			// 获取表格元素
			var table = document.getElementById("table1");
			// 获取所有行
			var rows = table.rows;
			// 遍历所有行
			let total = 0;
			for (var i = 1; i < rows.length; i++) {
				var row = rows[i];
				// 假设我们关注每行的第一个单元格的文本内容是否等于'目标文本'
				// 第三个单元格 var cellContent = row.cells[2].innerHTML;

				var cellContent = row.innerHTML;
				if (cellContent.indexOf(str) !== -1) {
					row.style.display = "";
					total++
				} else {
					row.style.display = "none";
				}
			}
			document.getElementById("dsize").innerHTML = total
		}
	</script>
</html>