How to find text inside a table with parent div

Question

I want to find text inside a parent div with a table, if I write some text inside my search string, I want to show only the result, and the rest divs are hidde, I have different td that I want to search in four cells (left to rigth ) the last cell is not important

This is my HTML:

<div class="caja-orden-curso" alt="3"> <div class="contenido-curso"> <table id="perrito" border="1" style="width:98%"> <tr> <td width="220" height="100"> <div id="vehicle_type" class="top-order"> 36624 </div> </td> <td width="200"> <div id="step_form_1" class="order-steps"> <span id="created">02/02/2016 10:59</span> </div> </td> <td width="300"> <div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div> <div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div> </td> <td width="120"> <div class="order-details-top"> alexis <div> <div class="order-details-bottom"> saul </div> </td> <td width="120"> 565897423 </td> </tr> </table> </div> <div class="color-lateral-curso"> </div> <div class="tam-tabla-orden"> </div> </div> <div class="caja-orden-curso" id="statu-20" alt="12"> <div class="contenido-curso"> <table id="perrito" border="1" style="width:98%"> <tr> <td width="220" height="100"> <div id="vehicle_type" class="top-order"> 35684 </div> </td> <td width="200"> <div id="step_form_1" class="order-steps"> <span id="created">01/02/2016 10:59</span> </div> </td> <td width="300"> <div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div> <div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div> </td> <td width="120"> <div class="order-details-top"> rtynbv <div> <div class="order-details-bottom"> zsdf </div> </td> <td width="120"> 565897423 </td> </tr> </table> </div> <div class="color-lateral-finalizada-segundo" id="statu-9"> </div> <div class="tam-tabla-orden"> </div> </div> 

And this is my Script:

 $("#buscador").keyup(function() { var dInput = $(this).val(); if (!this.value) { $('div.caja-orden-curso').fadeIn(); } else { $("table#perrito").each(function() { $(this).find('div.top-order:contains(' + dInput + ')').length > 0 ? $(this).show() : $(this).parents('div.caja-orden-curso').fadeOut(); }); } }); 

My example only works with the first cell with three other cells that I cannot.

This is my fiddle

Answer 1

The identifiers on the page must be unique. Therefore, change id="perrito" to class="perrito" and do the following.

 $("table.perrito").each(function() { if ($(this).find('div:contains(' + dInput + ')').length) $(this).parents('div.caja-orden-curso').fadeIn(); else $(this).parents('div.caja-orden-curso').fadeOut(); }); 

Demo

Answer 2

Here you used find funtion only for the "higher order" class. If you want to work with all 4 cells, you also apply this class to all three cells. You can try this

 <div class="caja-orden-curso" alt="3"> <div class="contenido-curso"> <table id="perrito" border="1"style="width:98%"> <tr> <td width="220" height="100"> <div id="vehicle_type" class="top-order"> 36624 </div> </td> <td width="200"> <div id="step_form_1" class="order-steps top-order"> <span id="created">02/02/2016 10:59</span> </div> </td> <td width="300"> <div class="order-details-top top-order" style="height: 14px;">presidente masaryk, 29, , polanco</div> <div class="order-details-bottom top-order" style="height: 23px;">colima, 323, , roma norte</div> </td> <td width="120"> <div class="order-details-top top-order"> alexis <div> <div class="order-details-bottom top-order"> saul </div> </td> <td width="120"> 565897423 </td> </tr> </table> </div> <div class="color-lateral-curso"> </div> <div class="tam-tabla-orden"> </div> </div> <div class="caja-orden-curso" id="statu-20" alt="12"> <div class="contenido-curso"> <table id="perrito" border="1"style="width:98%"> <tr> <td width="220" height="100"> <div id="vehicle_type" class="top-order"> 35684 </div> </td> <td width="200"> <div id="step_form_1" class="order-steps top-order"> <span id="created">01/02/2016 10:59</span> </div> </td> <td width="300"> <div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div> <div class="order-details-bottom top-order" style="height: 23px;">jhgfre, 483</div> </td> <td width="120"> <div class="order-details-top top-order"> rtynbv <div> <div class="order-details-bottom top-order"> zsdf </div> </td> <td width="120"> 565897423 </td> </tr> </table> </div> <div class="color-lateral-finalizada-segundo" id="statu-9"> </div> <div class="tam-tabla-orden"> </div> </div> 

Answer 3

If you want to search or sort or ... on a table, you can use jQuery DataTables plugins

• Pagination display, instant search and multi-column ordering
• Supports almost any data source: easily customizable by topics: DataTables, jQuery UI, Bootstrap, Foundation
• Automatically loading Ajax data

• and...

  $('#myTable').DataTable();

JQuery Data Plugins