【來自教程】jquery前端實現搜索+查看

功能實現：

• 列表的查看讀取；
• 搜索結果：無，須要提示；
• 搜索輸入框：空，要提示；
• 搜索框爲：空，失去焦點，須要初始化

 

若是要了解前端新增+批量刪除的內容，請查看個人另外一篇文章：  https://my.oschina.net/u/583531/blog/1527735 【原創】表格前端新增和批量刪除

 

效果動態圖以下：

 js以下：

此段js中小技巧有以下幾個：

1. each去遍歷td取值，而後塞到數組中，模態顯示詳情是取的數組的值
2. 查詢過濾的方法：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>
<!--模態窗-->