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

60 阅读 0 评论 40 点赞

我是靠谱客的博主火星上铃铛，最近开发中收集的这篇文章主要介绍获取表格第n列所有的值，table万能搜索，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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>