获取表格第n列所有的值，table万能搜索

最新推荐文章于 2023-07-31 09:54:45 发布

大头目T

最新推荐文章于 2023-07-31 09:54:45 发布

阅读量746

点赞数

分类专栏：前端文章标签： HTML表格

本文链接：https://blog.csdn.net/weixin_44315761/article/details/89944663

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script src="js/jquery.min.1.12.4.js"></script>
		<input type="text" id="shai" />

		<table>

			<thead>
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>生日</td>
				</tr>
			</thead>

			<tbody>

				<tr>
					<td>张三</td>
					<td>男</td>
					<td>15</td>
					<td>1999</td>
				</tr>

				<tr>
					<td>李四</td>
					<td>男</td>
					<td>18</td>
					<td>1999</td>
				</tr>

				<tr>
					<td>王五</td>
					<td>男</td>
					<td>15</td>
					<td>1999</td>
				</tr>

			</tbody>

		</table>
		<hr />
		<input type="button" id="btnShowMe" value="test" />
		<table id="tab">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
		<script type="text/javascript">
			$(function() {
				$("#btnShowMe").click(function() {
					//alert($("#tab tr td:first-child").text());//一下得到所有值
					//alert($("#tab tr:eq(0) td:eq(1)").text());
					var arr = $("#tab tr td:nth-child(2)"); //获取第二列所有的元素值
					for(var i = 0; i < arr.length; i++) {
						alert($(arr[i]).text()); //分别一个个弹出
					}
				})
			});
		</script>
//万能表格搜索
		<script>
			$(function() {
				$("#shai").keyup(function() {
					$("table tbody tr").hide().filter(":contains('" + ($(this).val()) + "')").show();
				});
				keyup(); //这句一定要有。

			});
		</script>
	</body>

</html>

大头目T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取表格第n列所有的值，table万能搜索

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="js/jquery.min.1.12.4.js"></script&...
复制链接

扫一扫

专栏目录