Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

119
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda