How to find text inside table with div parent

Question

I want to find text inside div parent with table, if i write any text inside my search bar i want to show only the result and the rest of the divs hidde, i have differents td that i want search in the 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 work with the first cell with the other three cells i cant.

This is my fiddle

Answer 1

IDs in a page must be unique. So 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 on "top-order" class only.if you want work with all 4 cells then you apply this class on all of three cells also. You may 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 search or sort or ... on table , you can use DataTables jQuery plugins

• Pagination, instant search and multi-column ordering
• Supports almostany data source: Easily theme-able: DataTables, jQuery UI, Bootstrap, Foundation
• Ajax auto loading of data

• and ...

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

DataTables jQuery plugins