【来自教程】jquery前端实现搜索+查看

最新推荐文章于 2020-07-02 17:47:12 发布

weixin_34095889

最新推荐文章于 2020-07-02 17:47:12 发布

阅读量167

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/u/583531/blog/1630448

本文介绍了一种使用jQuery实现的前端表格数据搜索及查看详情功能的方法。通过点击按钮触发模态框显示选定行的详细信息，并实现了根据输入关键词进行搜索过滤的功能。

2019独角兽企业重金招聘Python工程师标准>>>

功能实现：

列表的查看读取；
搜索结果：无，需要提示；
搜索输入框：空，要提示；
搜索框为：空，失去焦点，需要初始化

如果要了解前端新增+批量删除的内容，请查看我的另一篇文章： https://my.oschina.net/u/583531/blog/1527735 【原创】表格前端新增和批量删除

效果动态图如下：

js如下：

此段js中小技巧有如下几个：

each去遍历td取值，然后塞到数组中，模态显示详情是取的数组的值
查询过滤的方法：filter(':contains('+search_val+')')；

<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		
		//查看更多显示弹窗
		$(".btn-view").click(function(){
			var arr=[];
           
			$(this).parent().siblings().each(function(){ //重点：找到点击按钮的父类兄弟（即td）遍历依次取值 
				arr.push($(this).text());
			});
			
			console.log(arr);
			
			$('#modal').modal('show');
			$("#modal .modal-body div:nth-child(2)").text(arr[1]);
			$("#modal .modal-body div:nth-child(4)").text(arr[2]);
			$("#modal .modal-body div:nth-child(6)").text(arr[3]);
			$("#modal .modal-body div:nth-child(8)").text(arr[4]);
		})
		
		//搜索出结果
		$("#search_btn").click(function(){
			var search_val = $("#search_input").val();
			if (search_val !==""){
				var search_len = $("table tbody tr").filter(':contains('+search_val+')').length;
				if (search_len > 0){
					$("table tbody tr").hide().filter(':contains('+search_val+')').show(); //先隐藏全部tr，然后显示符合筛选条件的
				}
				else{
					alert("查无记录！")
				}
			}	
			else{
				alert("请输入关键字！")
			}
		})
		
		//失去焦点判断为空则显示全部
		$("#search_input").blur(function(){
			var search_val = $("#search_input").val();
			if (search_val ==""){
				$("table tbody tr").show();
			}
		})		
	})
</script>

html如下：

<div class="container">	
			<div class="row">
				<div class="col-md-4">
					<div class="input-group mb-3">
					  <input type="text" class="form-control" id="search_input" placeholder="请输入关键词..." >
					  <div class="input-group-append">
					    <button class="btn btn-primary" type="button" id="search_btn">搜索</button>
					  </div>
					</div>
				</div>
			</div>
			<table class="table table-hover table-condensed">
				<thead>
					<tr>
						<th>序号</th>
						<th>车牌</th>
						<th>品牌</th>
						<th>姓名</th>
						<th>年纪</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>01</td>
						<td>浙B9CG31</td>
						<td>别克</td>
						<td>大柴哥哥</td>
						<td>18</td>
						<td>
							<button type="button" value="" class="btn-view btn btn-primary btn-sm">查看</button>
						</td>
					</tr>
					<tr>
						<td>02</td>
						<td>浙B99888</td>
						<td>宝马</td>
						<td>陈大江</td>
						<td>39</td>
						<td>
							<button type="button" value="" class="btn-view btn btn-primary btn-sm">查看</button>
						</td>
					</tr>
					<tr>
						<td>03</td>
						<td>浙B12345</td>
						<td>雷克萨斯</td>
						<td>张小先</td>
						<td>56</td>
						<td>
							<button type="button" value="" class="btn-view btn btn-primary btn-sm">查看</button>
						</td>
					</tr>
					<tr>
						<td>04</td>
						<td>浙B67890</td>
						<td>丰田</td>
						<td>陈晓刚</td>
						<td>21</td>
						<td>
							<button type="button" value="" class="btn-view btn btn-primary btn-sm">查看</button>
						</td>
					</tr>
					<tr>
						<td>05</td>
						<td>浙B11566</td>
						<td>别克</td>
						<td>雷晓亮</td>
						<td>46</td>
						<td>
							<button type="button" value="" class="btn-view btn btn-primary btn-sm">查看</button>
						</td>
					</tr>
			</tbody>
		</table>
	</div>



<!--模态窗-->
<div class="modal" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">详情</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            		<div class="col-md-6">车牌</div>
            		<div class="col-md-6"></div>
            		<div class="col-md-6">品牌</div>
            		<div class="col-md-6"></div>
            		<div class="col-md-6">姓名</div>
            		<div class="col-md-6"></div>
            		<div class="col-md-6">年纪</div>
            		<div class="col-md-6"></div>
            	</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!--模态窗-->

转载于:https://my.oschina.net/u/583531/blog/1630448