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代码来解决使用事件，过滤器()，each()，标志。

我期待得到的代码筛选表行(通过改变他们的背景颜色)在Jquery中选择和输入。

Answer 1

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

代码现在只检查每个过滤器是否有一个值。

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

$("[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 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>
<option value="1">Standart</option>
<option value="2">Express</option>
<option value="3">Special Price</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>