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

Found the answer. For anybody who's got the same issue:

 

you need to put the myTable at the Table Body so it doesnt pick up the whole TH names too.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×