Table search by RegExp Jquery



  • There is a table in the cap where the pole field is located:

    <table id="rez_tablh">
    <tr>
    <th id="thnaim"><input type="text" placeholder="Наименование..."></th>
    <th id="thinv"><input type="text" placeholder="Номер № ..."></th>
    </tr>
    </table>
    

    And the table in which the sample results:

      table id="rez_tab">
      <tr>
      <td id="naim">Яблоко</td>
      <td id="inv">1234</td>
      </tr>
      <tr>
      <td id="naim">Яблоко</td>
      <td id="inv">23</td>
      </tr>
      <tr>
      <td id="naim">Яблоко</td>
      <td id="inv">2</td>
      </tr>
      <tr>
      <td id="naim">Яблоко</td>
      <td id="inv">784</td>
      </tr>
      <tr>
      <td id="naim">Груша</td>
      <td id="inv">23</td>
      </tr>
      </table>
    

    The poles are searched as follows:

     $("#thnaim :input").bind("keyup", function() {
    

    var filter=$(this).val();

    $('#rez_tab tr').find('#naim').each(function () {

    if(($(this).text().search(new RegExp(filter,"i"))<0))
    {

    $(this).parent().hide();
    

    }
    else
    {
    $(this).parent().show();
    }

    });
    });

    $("#thinv :input").bind("keyup", function() {

    var filter=$(this).val();

    $('#rez_tab tr').find('#inv').each(function () {

    if(($(this).text().search(new RegExp(filter,"i"))<0))
    {

    $(this).parent().hide();
    

    }
    else
    {
    $(this).parent().show();
    }

    });
    });

    How can filters be shared? Only an apple with room 23 would be displayed in search of an apple. The apple and the pear are coming out now.

    Example of work: https://jsfiddle.net/azaza/uxtf8u4j/1/



  • One processing function that checks both fields simultaneously:

    $("#rez_tablh input").on("keyup", function(){
        var filterN = $("#thnaim input").val(),
            filterI = $("#thinv input").val();
    
    $("#rez_tab tr").each(function () {
        var n = $(this).find('#naim').text(),
            i = $(this).find('#inv').text();
        if (n.search(new RegExp(filterN,"i")) &lt; 0 ||
            i.search(new RegExp(filterI,"i")) &lt; 0) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
    

    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <table id="rez_tablh">
    <tr>
    <th id="thnaim"><input type="text" placeholder="Наименование..."></th>
    <th id="thinv"><input type="text" placeholder="Номер № ..."></th>
    </tr>
    </table>
    <table id="rez_tab">
    <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">1234</td>
    </tr>
    <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">23</td>
    </tr>
    <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">2</td>
    </tr>
    <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">784</td>
    </tr>
    <tr>
    <td id="naim">Груша</td>
    <td id="inv">23</td>
    </tr>
    </table>

    P. S. If you need a precise comparison of the number in the second field, instead of the regular, just use the fall of the values or add the symbols of the beginning and end of the line.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2