我是JQuery的新手。我有下面的HTML:
<div class="search-button">
<label for="filter">Store Name:</label>
<select class="filter" data-tableId="table1" onchange="testFilter()">
<option value="all">All Stores</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="France">France</option>
<option value="Denmark">Denmark</option>
<option value="Ireland">Ireland</option>
</select>
</div>
<div id="recordContent">
<table id="orderTable">
<tbody>
<tr>
<th>Store Name</th>
<th>Language Code</th>
<th>Testcase Name</th>
<th>Order Id</th>
<th>Order Total</th>
<th>Order Date</th>
</tr>
<tr class="record">
<td class="store">ireland</td>
<td class="langCode">en_IE</td>
<td class="tcName">Guest User Checkout - Credit Card</td>
<td class="orderID">4001820209</td>
<td class="orderTotal">19.98</td>
<td class="orderDate">12-02-2019 15:37:30.201</td>
</tr>
<tr></tr>
<tr class="record">
<td class="store">denmark</td>
<td class="langCode">en_DK</td>
<td class="tcName">Guest User Checkout - Credit Card</td>
<td class="orderID">6001825084</td>
<td class="orderTotal">338 DKK</td>
<td class="orderDate">12-02-2019 15:37:35.140</td>
</tr>
<tr></tr>
<tr class="record">
<td class="store">united_kingdom</td>
<td class="langCode">en_GB</td>
<td class="tcName">Guest User Checkout - Credit Card</td>
<td class="orderID">7002541022</td>
<td class="orderTotal">13.04</td>
<td class="orderDate">12-02-2019 15:45:08.038</td>
</tr>
<tr></tr>
<tr class="record">
<td class="store">united_states</td>
<td class="langCode">en_US</td>
<td class="tcName">Guest User Checkout - Credit Card</td>
<td class="orderID">2001741036</td>
<td class="orderTotal">69.90</td>
<td class="orderDate">12-02-2019 15:46:33.310</td>
</tr>
<tr></tr>
<tr class="record">
<td class="store">united_kingdom</td>
<td class="langCode">en_GB</td>
<td class="tcName">Registered User Checkout - Paypal</td>
<td class="orderID">7002541028</td>
<td class="orderTotal">8.14</td>
<td class="orderDate">12-02-2019 15:50:04.713</td>
</tr>
<tr></tr>
<tr class="record">
<td class="store">united_states</td>
<td class="langCode">en_US</td>
<td class="tcName">Registered User Checkout - Paypal</td>
<td class="orderID">2001741030</td>
<td class="orderTotal">15.98</td>
<td class="orderDate">12-02-2019 15:51:23.551</td>
</tr>
<tr></tr>
<tr class="record">
<td class="store">france</td>
<td class="langCode">en_FR</td>
<td class="tcName">Guest User Checkout - Credit Card</td>
<td class="orderID">11002001160</td>
<td class="orderTotal">35.44</td>
<td class="orderDate">12-02-2019 15:53:45.130</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
并使用下面的JQuery函数根据列文本过滤记录,但不能根据商店名称过滤记录:
<script>
function testFilter(){
$(".filter").change(function() {
var filterValue = $(this).val();
var row = $('.record');
console.log(filterValue);
row.hide()
row.each(function(i, el) {
if($(el).children().innerHTML == filterValue) {
$(el).show();
}
})
});
}
</script>
最佳答案
这是因为select中的选项值与表中的字段不对应。我对您的js代码进行了一些改进:
// I removed onchange property of your select
// because change event is already attached in this code
$(".filter").change(function() {
var translatedFilterValue = getTranslatedFilterValue($(this).val());
var rows = $('.record');
rows.each(function(i, el) {
if(translatedFilterValue == 'all' || ($(el).find('.store').text() == translatedFilterValue)) {
$(el).show();
} else {
$(el).hide();
}
})
});
//
// Translates text from select to corresponding values in table
// for example: from "United States" to "united_states"
//
function getTranslatedFilterValue(filterValue) {
filterValue = filterValue.toLowerCase();
return filterValue.replace(' ', '_');
}
工作提琴:CLICK!
关于javascript - 基于文本匹配的jQuery过滤器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54651198/