master

分支 (1)

管理

管理

master

tablesearch
/
tablesearch.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
<style>
table{width: 100%; padding: 15px; border-collapse: collapse; margin: 20px auto;}
table tr td,table tr th{padding: 6px 10px; line-height: 1.8;border: 1px solid #ddd; border-collapse: collapse;white-space: nowrap;text-align: center;}
table tr:nth-child(even){background: #fafafa;}
table tr:hover{background: #fafafa;}
table tr th{background: #007AFF;color: #fff;}
.search {margin: 20px 15px;}
.search input[type='search']{ padding: 8px; width: 200px; height: 44px;font-size: 14px;line-height: 44px;border: 1px solid #999;border-radius: 5px;box-sizing: border-box;}
.search input[type='button']{border: none;outline: none; border-radius: 5px; background: #007AFF;color: #fff;height: 44px;width: 60px;font-size: 14px;}
</style>
</head>
<body>
<div class="search">
	<input type="search" value="" id="search_box">
	<input type="button" value="搜索" id="search_btn">
	<input type="button" value="重置" id="search_reset">
</div>
<table>
	<thead>
		<tr>
			<th>编号</th>
			<th>名称</th>
			<th>项目一</th>
			<th>项目二</th>
			<th>项目三</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="name">987</td>
			<td>first</td>
			<td>342345</td>
			<td class="item">基金</td>
			<td>sdg</td>
		</tr>
		<tr>
			<td class="name">345</td>
			<td>second</td>
			<td>453</td>
			<td class="item">更改</td>
			<td>ht</td>
		</tr>
		<tr>
			<td class="name">22</td>
			<td>three</td>
			<td>345</td>
			<td class="item">订单</td>
			<td>sdg</td>
		</tr>
		<tr>
			<td class="name">345</td>
			<td>four</td>
			<td>53</td>
			<td class="item">啊啊</td>
			<td>ert</td>
		</tr>
		<tr>
			<td class="name">546</td>
			<td>five</td>
			<td>153</td>
			<td class="item">应用</td>
			<td>gh</td>
		</tr>
		<tr>
			<td class="name">112</td>
			<td>six</td>
			<td>345</td>
			<td class="item">天太</td>
			<td>er</td>
		</tr>
		<tr>
			<td class="name">443</td>
			<td>seven</td>
			<td>453</td>
			<td class="item">人人</td>
			<td>rt</td>
		</tr>
		<tr>
			<td class="name">345</td>
			<td>eight</td>
			<td>35</td>
			<td class="item">问问</td>
			<td>asdf</td>
		</tr>
		<tr>
			<td class="name">161</td>
			<td>nine</td>
			<td>123</td>
			<td class="item">请求</td>
			<td></td>
		</tr>
		<tr>
			<td class="name">165</td>
			<td>ten</td>
			<td>2345</td>
			<td class="item">二二</td>
			<td>fg</td>
		</tr>
	</tbody>
</table>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("#search_btn").click(function(){
	search();
});
$("#search_reset").click(function(){
	$("tbody tr").show();
	$(".nothing").hide();
});
function search(){
	var val = $("#search_box").val();
	var tr_list = $("tbody tr");
	var len = tr_list.length;
	$.each(tr_list,function(index,value){
		var content = $(this).find(".name").text();
		var item = $(this).find(".item")
		if(content.indexOf(val) !== -1){
			$(this).show();
		}else{
			$(this).hide();
			len--;
			if(len === 0){
				$("tbody").append("<tr class='nothing'><td colspan='5' style='text-align:center'>没有找到你要的内容！</td></tr>");
			}
		}
	});
}

</script>

</body>
</html>