Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

118
Vistas
How Can I filter the data based on textbox values that inside the table data?
                $("#srch").on("keyup", function() {
                            var value = $(this).val();
                        
                            $("#Filtertable tr").each(function(index) {
                                if (index !== 0) {
                        
                                    $row = $(this);
                        
                                    var id = $row.find("td:nth(1)").val();
                        
                                    if (id.indexOf(value) !== 0) {
                                        $row.hide();
                                    }
                                    else {
                                        $row.show();
                                    }
                                }
                            });
                        });
                
        
        
        
        
        
    <table id="Filtertable" style="width: 40%; border: 1px solid black;">
        <thead>
            <tr>
                <th></th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox"> </td>
                <td>
                    <input type="text" Value=" Hi Tom"> </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"> </td>
                <td>
                    <input type="text" Value=" Hi Jerry"> </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"> </td>
                <td>
                    <input type="text" Value=" Happy Morning"> </td>
            </tr>
        </tbody>
    </table>



This is my code, Can someone explain How to get the value of textbox inside the td

How can I filter the data after adding some extra rows, Tried Many examples but nothing worked so far, Please Help. Is there any alternative Way available to do this filter??? Nothing worked so far since I dont know How to get it done! Any solution without using JQuery is also appriciated..

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

There is 2 problems.

To get the value in a <td> you have to use .text(), or you can add input in the selector.

  var id = $row.find("td:nth(1) input").val();

  if (id.indexOf(value) == -1) {
    $row.hide();
  } else {
    $row.show();
  }

Also it has to be id.indexOf(value) == -1

Demo

$("#srch").on("keyup", function() {
  var value = $(this).val().toLowerCase();

  $("#Filtertable tr").each(function(index) {
    if (index !== 0) {

      $row = $(this);

      var id = $row.find("td:nth(1) input").val().toLowerCase();

      if (id.indexOf(value) == -1) {
        $row.hide();
      } else {
        $row.show();
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Filtertable" style="width: 40%; border: 1px solid black;">
  <thead>
    <tr>
      <th></th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox"> </td>
      <td>
        <input type="text" Value=" Hi Tom"> </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"> </td>
      <td>
        <input type="text" Value=" Hi Jerry"> </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"> </td>
      <td>
        <input type="text" Value=" Happy Morning"> </td>
    </tr>
  </tbody>
</table>
<input id="srch" />

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda