下面是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&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过滤表行(通过更改它们的背景色)的代码。
1条答案
按热度按时间njthzxwz1#
我稍微重写了代码,出于测试原因,我从
$("#groupProcessingTable tbody tr")
中删除了:not(:last-child)
代码现在只检查i filter是否有值。
演示
x一个一个一个一个x一个一个二个x