Jquery：无法使用选择和输入过滤表行

Question

这是html代码：

<div class="filters">
      <div class="row">
        <div class="col-md-3 filter">
          <div class="form-group">
            <label>Name</label>
            <input type="text" value="" id="filter-by-name" class="form-control" autocomplete="off">
          </div>
        </div>
        <div class="col-md-3 filter">
          <div class="form-group">
            <label>Supplier</label>
            <input type="text" value="" id="filter-by-supplier" class="form-control" data-id="" autocomplete="off">
          </div>
        </div>
        <div class="col-md-2 filter">
          <div class="form-group">
            <label>From Date</label>
            <input type="number" min="0" value="" id="filter-by-fromdate" class="form-control" autocomplete="off">
          </div>
        </div>
        <div class="col-md-2 filter">
          <div class="form-group">
            <label>To Date</label>
            <input type="number" min="0" value="" id="filter-by-todate" class="form-control" autocomplete="off">
          </div>
        </div>
        <div class="col-md-2 filter">
          <div class="form-group">
            <label>PriceNo</label>
            <select id="filter-by-priceno" class="form-control">
              <option value=""></option>
            </select>
          </div>
        </div>
      </div>
    </div>

<table class="iblock table table-striped table-bordered table-hover table-order-items">
    <thead>
      <tr class="group-process">
        <th>Name</th>
        <th>Supplier</th>
        <th>Fromdate</th>
        <th>Todate</th>
        <th colspan="3">PriceNo</th>
      </tr>
    </thead>
    <tbody>
              <tr class="odd group-process" 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]" class="form-control">
                              <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]" class="form-control text-right" value="0" placeholder="0"></td>
          <td><input type="text" name="product-delivery-to[2354031-3-2]" class="form-control text-right" value="13" placeholder="13"></td>
          <td>
            <select name="product-price_no[2354031-3-2]" class="form-control text-right">
                              <option value="1">Standart</option>
                              <option value="2" selected="">Express</option>
                              <option value="3">Special Price</option>
            </select>
          </td>
        </tr>    
    </tbody>
  </table>

这也是我的 Jquery 代码：

$("[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", '' );
        }
    });
});

我的包含输入和选择的过滤器必须用作逻辑与。 当所有输入和选择都为真时，该行有黄色背景；否则这一行的背景颜色将是透明的。

请帮忙！ 谢谢你的所有答案。

我尝试编写 Jquery 代码来解决使用事件、filter()、each()、标志的问题。

我期待在 Jquery 中使用 select 和 input 获得用于过滤表行（通过更改它们的背景颜色）的代码。

Answer 1

我重写了一些代码，出于测试原因，我从 $("#groupProcessingTable tbody tr") 中删除了 :not(:last-child)

如果 i filter 有一个值，代码现在将只检查每个过滤器。

var match = true;
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("a").text().toLowerCase().includes(pricenoValue);
}
console.log(match)
if (match) {
  $(this).css("background-color", "yellow");
} else {
  $(this).css("background-color", "");
}

演示

$("[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 tbody tr").each(function() {
    var match = true;
    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("a").text().toLowerCase().includes(pricenoValue);
    }
    console.log(match)
    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 class="filters">
  <div class="row">
    <div class="col-md-3 filter">
      <div class="form-group">
        <label>Name</label>
        <input type="text" value="" id="filter-by-name" class="form-control" autocomplete="off">
      </div>
    </div>
    <div class="col-md-3 filter">
      <div class="form-group">
        <label>Supplier</label>
        <input type="text" value="" id="filter-by-supplier" class="form-control" data-id="" autocomplete="off">
      </div>
    </div>
    <div class="col-md-2 filter">
      <div class="form-group">
        <label>From Date</label>
        <input type="number" min="0" value="" id="filter-by-fromdate" class="form-control" autocomplete="off">
      </div>
    </div>
    <div class="col-md-2 filter">
      <div class="form-group">
        <label>To Date</label>
        <input type="number" min="0" value="" id="filter-by-todate" class="form-control" autocomplete="off">
      </div>
    </div>
    <div class="col-md-2 filter">
      <div class="form-group">
        <label>PriceNo</label>
        <select id="filter-by-priceno" class="form-control">
          <option value=""></option>
        </select>
      </div>
    </div>
  </div>
</div>

<table id="groupProcessingTable" class="iblock table table-striped table-bordered table-hover table-order-items">
  <thead>
    <tr class="group-process">
      <th>Name</th>
      <th>Supplier</th>
      <th>Fromdate</th>
      <th>Todate</th>
      <th colspan="3">PriceNo</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd group-process" 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]" class="form-control">
          <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]" class="form-control text-right" value="0" placeholder="0"></td>
      <td><input type="text" name="product-delivery-to[2354031-3-2]" class="form-control text-right" value="13" placeholder="13"></td>
      <td>
        <select name="product-price_no[2354031-3-2]" class="form-control text-right">
          <option value="1">Standart</option>
          <option value="2" selected="">Express</option>
          <option value="3">Special Price</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>