Jquery: Cannot filter table rows with selects and inputs-CodePudding

Here is html code:

<div >
      <div >
        <div >
          <div >
            <label>Name</label>
            <input type="text" value="" id="filter-by-name"  autocomplete="off">
          </div>
        </div>
        <div >
          <div >
            <label>Supplier</label>
            <input type="text" value="" id="filter-by-supplier"  data-id="" autocomplete="off">
          </div>
        </div>
        <div >
          <div >
            <label>From Date</label>
            <input type="number" min="0" value="" id="filter-by-fromdate"  autocomplete="off">
          </div>
        </div>
        <div >
          <div >
            <label>To Date</label>
            <input type="number" min="0" value="" id="filter-by-todate"  autocomplete="off">
          </div>
        </div>
        <div >
          <div >
            <label>PriceNo</label>
            <select id="filter-by-priceno" >
              <option value=""></option>
            </select>
          </div>
        </div>
      </div>
    </div>

<table >
    <thead>
      <tr >
        <th>Name</th>
        <th>Supplier</th>
        <th>Fromdate</th>
        <th>Todate</th>
        <th colspan="3">PriceNo</th>
      </tr>
    </thead>
    <tbody>
              <tr  data-id="2354031" style="background-color: rgb(255, 213, 128);">
          <td><a href="/#popup.article_info?brand_id=3&amp;article=V615881620" target="_blank">SEALING WASHER</a></td>
          <td>
            <select name="product-supplier_id[2354031-3-2]" >
                              <option value="3" selected="">AGCO</option>
                              <option value="8">MAZZ</option>
                              <option value="9">Tomchuk</option>
                              <option value="88">ATTL</option>
                          </select>
          </td>
          <td><input type="text" name="product-delivery-from[2354031-3-2]"  value="0" placeholder="0"></td>
          <td><input type="text" name="product-delivery-to[2354031-3-2]"  value="13" placeholder="13"></td>
          <td>
            <select name="product-price_no[2354031-3-2]" >
                              <option value="1">Standart</option>
                              <option value="2" selected="">Express</option>
                              <option value="3">Special Price</option>
            </select>
          </td>
        </tr>    
    </tbody>
  </table>

Also here is my Jquery code:

$("[id^=filter-by]").on('keyup change', function () {
    var match = true;
    var nameValue = $.trim($('#filter-by-name').val()).toLowerCase(); 
    var supplierValue = $.trim($('#filter-by-supplier').val()).toLowerCase(); 
    var fromdateValue = parseInt($('#filter-by-fromdate').val()); 
    var todateValue = parseInt($('#filter-by-todate').val()); 
    var pricenoValue = $('#filter-by-priceno').find(":selected").text();

    $groupProcessingTable.find('tbody tr:not(:last-child)').each(function () {
        if (nameValue != "") {
            if (!($(this.children[0]).find('a').text().toLowerCase().indexOf(nameValue) > -1)) {
                match = false;
        }
        if (supplierValue != "") {
            if (!($(this.children[1]).find('option').filter(':selected').text().toLowerCase().indexOf(supplierValue) > -1)) {
                match = false;               
        }
        if (!isNaN(fromdateValue)) {
            if (!(parseInt($(this.children[2]).find('input[name^=product-delivery-from]').val()) >= fromdateValue)) {
                match = false;
        }
        if (!isNaN(todateValue)) {
            if (!(parseInt($(this.children[3]).find('input[name^=product-delivery-to]').val()) <= todateValue)) {
                match = false;
            }
        }
        if (pricenoValue != "") {
            if (!($(this.children[4]).find('a').text().toLowerCase().indexOf(pricenoValue) > -1)) {
                match = false;
            }
        }
        if (match) {
            $(this).css("background-color", yellow);
        } else {
            $(this).css("background-color", '' );
        }
    });
});

My filter which contains inputs and selects has to work as Logical AND. When all inputs and selects are true, this row have yellow background; otherwise this row's background color wil be transparent.

Please, help! Thank You for all answers.

I tried to write Jquery code for solving using events, filter(), each(), flags.

I am expecting to get code for filtering table rows (by changing their background-color) with select and inputs in Jquery.

CodePudding user response：

I've rewritten then code a bit, and for the test reason I have removed :not(:last-child) from $("#groupProcessingTable tbody tr")

The code will now only check each filter if i filter has a value.

$("#groupProcessingTable tbody tr").each(function() {
    var match = (nameValue || supplierValue || fromdateValue || todateValue || pricenoValue);
    
    if (nameValue != "") {
      match = $(this).find("a").text().toLowerCase().includes(nameValue);
    }
    if (supplierValue != "") {
      match = match && $(this).find("option:selected").text().toLowerCase().includes(supplierValue);
    }
    if (!isNaN(fromdateValue)) {
      match = match && parseInt($(this).find("input[name^=product-delivery-from]").val()) >= fromdateValue;
    }
    if (!isNaN(todateValue)) {
      match = match && parseInt($(this).find("input[name^=product-delivery-to]").val()) <= todateValue;
    }
    if (pricenoValue != "") {
      match = match && $(this).find("select[name^=product-price_no] option:selected").text().toLowerCase() == pricenoValue;
    }
    if (match) {
      $(this).css("background-color", "yellow");
    } else {
      $(this).css("background-color", "");
    }
});

Demo

$("[id^=filter-by]").on('keyup change', function() {
  var nameValue = $.trim($('#filter-by-name').val()).toLowerCase();
  var supplierValue = $.trim($('#filter-by-supplier').val()).toLowerCase();
  var fromdateValue = parseInt($('#filter-by-fromdate').val());
  var todateValue = parseInt($('#filter-by-todate').val());
  var pricenoValue = $('#filter-by-priceno option:selected').text().toLowerCase();

  $("#groupProcessingTable tbody tr").each(function() {
    var match = (nameValue || supplierValue || fromdateValue || todateValue || pricenoValue);
    
    if (nameValue != "") {
      match = $(this).find("a").text().toLowerCase().includes(nameValue);
    }
    if (supplierValue != "") {
      match = match && $(this).find("option:selected").text().toLowerCase().includes(supplierValue);
    }
    if (!isNaN(fromdateValue)) {
      match = match && parseInt($(this).find("input[name^=product-delivery-from]").val()) >= fromdateValue;
    }
    if (!isNaN(todateValue)) {
      match = match && parseInt($(this).find("input[name^=product-delivery-to]").val()) <= todateValue;
    }
    if (pricenoValue != "") {
      match = match && $(this).find("select[name^=product-price_no] option:selected").text().toLowerCase() == pricenoValue;
    }
    if (match) {
      $(this).css("background-color", "yellow");
    } else {
      $(this).css("background-color", "");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <label>Name</label>
        <input type="text" value="" id="filter-by-name"  autocomplete="off">
      </div>
    </div>
    <div >
      <div >
        <label>Supplier</label>
        <input type="text" value="" id="filter-by-supplier"  data-id="" autocomplete="off">
      </div>
    </div>
    <div >
      <div >
        <label>From Date</label>
        <input type="number" min="0" value="" id="filter-by-fromdate"  autocomplete="off">
      </div>
    </div>
    <div >
      <div >
        <label>To Date</label>
        <input type="number" min="0" value="" id="filter-by-todate"  autocomplete="off">
      </div>
    </div>
    <div >
      <div >
        <label>PriceNo</label>
        <select id="filter-by-priceno" >
          <option value=""></option>
          <option value="1">Standart</option>
          <option value="2">Express</option>
          <option value="3">Special Price</option>
        </select>
      </div>
    </div>
  </div>
</div>

<table id="groupProcessingTable" >
  <thead>
    <tr >
      <th>Name</th>
      <th>Supplier</th>
      <th>Fromdate</th>
      <th>Todate</th>
      <th colspan="3">PriceNo</th>
    </tr>
  </thead>
  <tbody>
    <tr  data-id="2354031" style="background-color: rgb(255, 213, 128);">
      <td><a href="/#popup.article_info?brand_id=3&amp;article=V615881620" target="_blank">SEALING WASHER</a></td>
      <td>
        <select name="product-supplier_id[2354031-3-2]" >
          <option value="3" selected="">AGCO</option>
          <option value="8">MAZZ</option>
          <option value="9">Tomchuk</option>
          <option value="88">ATTL</option>
        </select>
      </td>
      <td><input type="text" name="product-delivery-from[2354031-3-2]"  value="0" placeholder="0"></td>
      <td><input type="text" name="product-delivery-to[2354031-3-2]"  value="13" placeholder="13"></td>
      <td>
        <select name="product-price_no[2354031-3-2]" >
          <option value="1">Standart</option>
          <option value="2" selected="">Express</option>
          <option value="3">Special Price</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>