Jump to content
vichilino

JQuery filtering hides Table Heads - How to stop it?

Recommended Posts

Hello, i am currently building something that uses this example below in order to filter names, hiding everything that is not being searched into the search bar. My issue is that the JQuery hides the Table Heads, instead of only hiding the none related names to the search.

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table

I basically copied pasted the example there, with the difference that I have 3 different tables, they all filter correctly. The only issue is that it also hides the TH.

What can i do to stop it form hiding the THs (Room, Sillas, Videos)? 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="mystyle2.css">
	<link rel="icon" href="favicon.png" />
	

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

	<title>Room Locator CRSSC</title>


	 	 <!-- Creado por Adrian Velez Salas QA Dept - Octubre 2018 -->

	 	 
  </head>
  <body>

  <!--  alerta para mancos y ciegos -->

				<div class="row">

					  <div class="col-lg-12">
					  	
							<div class="alert alert-info alert-dismissible">

								  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

								  <strong>Importante:</strong> Escribe abajo el nombre del room que buscas. Da click en el texto para ver el mapa.

							</div>

					  </div>
					 
				</div>	

  				<!--  el header/navbar aqui abajo -->

  				<div class="row">

					  <div class="col-lg-12">
					  	
							<div class="panel panel-default">
							  	<div class="panel-body">Room Locator CRSSC <input id="myInput" type="text" placeholder="Search.."></div>
							  	</div>
							</div>

					  </div>
					 
				</div>


				

				<!--  Identifica el piso (Piso 1) -->	

				 <!--
				<div class="row">

					  <div class="col-lg-12">
					  	
							<div class="panel panel-default">
							  	<div class="panel-body">Piso 1 <input id="myInput" type="text" placeholder="Search.."></div>

							</div>

					  </div>
					 
				</div>
				 -->

				<!--  inicia el grid de 3: Edificio 1, 2, y 3 - Piso 1 -->



				
					  <!--  Columna Edificio A -->	
					  <div class="col-sm-4">


					  		<div class="panel panel-default">

							  <div class="panel-heading">Edificio A</div>


							  		<div class="panel-body">

							  			<!--  Columna Piso 1 Edificio A  -->
							  			
							  			<div class="well">Piso 1 </div>



							  			<div class="container">

											  <!--  Tabla Piso 1  Edificio A -->    	     
											  <table class="table table-striped" id="myTable">

												    <thead>
													      <tr>
														        <th>Room</th>
														        <th>Sillas</th>
														        <th>Video</th>
													      </tr>
												    </thead>

												    <tbody>
													      <tr>
														        <td>Los Quetzales</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Poás</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Isla Uvita</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Irazú</td>
														        <td>7</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Cahuita</td>
														        <td>7</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Chirripó</td>
														        <td>12</td>
														        <td>Yes</td>
													      </tr>


													      <tr>
														        <td>T. Room A</td>
														        <td>15</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>T. Room B</td>
														        <td>15</td>
														        <td>Yes</td>
													      </tr>

													    

												    </tbody>

											  </table>

										</div>	


							  		</div>

							</div>




					  </div>


			


						<!--  Columna Edificio B -->	
					  <div class="col-sm-4">



					  		<div class="panel panel-default">

							  <div class="panel-heading">Edificio B</div>


							  		<div class="panel-body">

							  			<!--  Columna Piso 1 Edificio B  -->
							  			
							  			<div class="well">Piso 1</div>



							  			<div class="container">

											  <!--  Tabla Piso 1  Edificio B -->    	     
											  <table class="table table-striped" id="myTable">

												    <thead>
													      <tr>
														        <th>Room</th>
														        <th>Sillas</th>
														        <th>Video</th>
													      </tr>
												    </thead>

												    <tbody>
													      <tr>
														        <td>Carara</td>
														        <td>4</td>
														        <td>No</td>
													      </tr>

													      <tr>
														        <td>Turrialba</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>
													      

													       <tr>
														        <td>Arenal</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Braulio Carrillo</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>
													   
													       <tr>
														        <td>Cabo Blanco</td>
														        <td>5</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Las Baulas</td>
														        <td>5</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Corcovado</td>
														        <td>7</td>
														        <td>Yes</td>
													      </tr>
													      
												    </tbody>

											  </table>

										</div>	


							  		</div>

							</div>




					  </div>



					  <!--  Columna Edificio C -->	
					  <div class="col-sm-4">



					  		<div class="panel panel-default">

							  <div class="panel-heading">Edificio C</div>


							  		<div class="panel-body">

							  			<!--  Columna Piso 1 Edificio C  -->
							  			
							  			<div class="well">Piso 1</div>



							  			<div class="container">

											  <!--  Tabla Piso 1  Edificio C -->    	     
											  <table class="table table-striped" id="myTable">

												    <thead>
													      <tr>
														        <th>Room</th>
														        <th>Sillas</th>
														        <th>Video</th>
													      </tr>
												    </thead>

												    <tbody>
													     
													      <tr>
														        <td>Guayabo</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Monteverde</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>

													       <tr>
														        <td>Ostional</td>
														        <td>4</td>
														        <td>Yes</td>
													      </tr>
													      
													      <tr>
														        <td>Training Room D</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>

													       <tr>
														        <td>Training Room E</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>


													       <tr>
														        <td>Tortuguero</td>
														        <td>12</td>
														        <td>Yes</td>
													      </tr>	

													      <tr>
														        <td>Training Room E</td>
														        <td>18</td>
														        <td>Yes</td>
													      </tr>

													      
												    </tbody>

											  </table>

										</div>	


							  		</div>

							</div>




					  </div>



				<!--  Identifica el piso (Piso 2) -->	

				<!--
				<div class="row">

					  <div class="col-lg-12">
					  	
							<div class="panel panel-default">
							  	<div class="panel-body">Piso 2</div>
							</div>

					  </div>
					 
				</div>	  

				-->

				<!--  inicia el grid de 3: Edificio 1, 2, y 3 - Piso 1 -->

					<div class="row">

					  <div class="col-lg-12">
					  	
							

					  </div>
					 
				</div>	

				
					  <!--  Columna Edificio A -->	
					  <div class="col-sm-4">



					  		<div class="panel panel-default">

							  <div class="panel-heading">Edificio A</div>


							  		<div class="panel-body">

							  			<!--  Columna Piso 1 Edificio A  -->
							  			
							  			<div class="well">Piso 2</div>



							  			<div class="container">

											  <!--  Tabla Piso 1  Edificio A -->    	     
											  <table class="table table-striped" >

												    <thead>
													      <tr>
														        <th>Room</th>
														        <th>Sillas</th>
														        <th>Video</th>
													      </tr>
												    </thead>

												    <tbody>
													      <tr>
														        <td>Cahuita</td>
														        <td>6</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Irazu</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Corcovado</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>

												    </tbody>

											  </table>

										</div>	


							  		</div>

							</div>




					  </div>


			


						<!--  Columna Edificio B -->	
					  <div class="col-sm-4">



					  		<div class="panel panel-default">

							  <div class="panel-heading">Edificio B</div>


							  		<div class="panel-body">

							  			<!--  Columna Piso 2 Edificio B  -->
							  			
							  			<div class="well">Piso 2</div>



							  			<div class="container">

											  <!--  Tabla Piso 1  Edificio B -->    	     
											  <table class="table table-striped">

												    <thead>
													      <tr>
														        <th>Room</th>
														        <th>Sillas</th>
														        <th>Video</th>
													      </tr>
												    </thead>

												    <tbody>
													      <tr>
														        <td>Cahuita</td>
														        <td>6</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Irazu</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Corcovado</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>
													      
												    </tbody>

											  </table>

										</div>	


							  		</div>

							</div>




					  </div>



					  <!--  Columna Edificio C -->	
					  <div class="col-sm-4">



					  		<div class="panel panel-default">

							  <div class="panel-heading">Edificio C</div>


							  		<div class="panel-body">

							  			<!--  Columna Piso 2 Edificio C  -->
							  			
							  			<div class="well">Piso 2</div>



							  			<div class="container">

											  <!--  Tabla Piso 2  Edificio C -->    	     
											  <table class="table table-striped" id="myTable3">

												    <thead>
													      <tr>
														        <th>Room</th>
														        <th>Sillas</th>
														        <th>Video</th>
													      </tr>
												    </thead>

												    <tbody>
													      <tr>
														        <td>Cahuita</td>
														        <td>6</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Irazu</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>

													      <tr>
														        <td>Corcovado</td>
														        <td>8</td>
														        <td>Yes</td>
													      </tr>
													      
												    </tbody>

											  </table>

										</div>	


							  		</div>

							</div>




					  </div>





				</div>


			<!-- JS para el search bar -->



  
 </body> 
</html>

 

Edited by vichilino

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...