$("#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..

CodePudding user response：

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

Show code snippet

$("#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" />

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>