Jquery:无法使用选择和输入筛选表行

chy5wohz  于 2023-01-16  发布在  jQuery
关注(0)|答案(1)|浏览(109)

下面是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过滤表行(通过更改它们的背景色)的代码。

njthzxwz

njthzxwz1#

我稍微重写了代码,出于测试原因,我从$("#groupProcessingTable tbody tr")中删除了:not(:last-child)
代码现在只检查i filter是否有值。

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

演示

x一个一个一个一个x一个一个二个x

相关问题