问题描述
我是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>
1楼
对您的代码进行一些更改。
为了使您的过滤器更好，您需要将select ddl的值与表（.store）的值保持相同。
United Kingdom != united_kingdom
function testFilter(obj) {
// removed .change because this method is already invoking on onchange
var filterValue = $(obj).val();
var row = $('.record');
console.log(filterValue);
row.hide()
row.each(function(i, el) {
if (
$(el).text().toUpperCase().indexOf(filterValue.toUpperCase()) > -1
// used .text(), because .innerHTML will return nodes as well
// whole content can't be same, so checked index of selected filter word
// You can add .find('.store') if you want to make search in only store column
// .toUpperCase() will maintain accuracy for sentence case. cause 'denmark' == 'Denmark' will return false
) {
$(el).show();
}
})
}
function testFilter(obj) { // removed .change because this method is already invoking on onchange var filterValue = $(obj).val(); var row = $('.record'); console.log(filterValue); row.hide() row.each(function(i, el) { // used .text(), because .innerHTML will return nodes as well if ( $(el).text().toUpperCase().indexOf(filterValue.toUpperCase()) > -1 // whole content can't be same, so checked index of selected filter word ) { $(el).show(); } }) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search-button"> <label for="filter">Store Name:</label> <select class="filter" data-tableId="table1" onchange="testFilter(this)"> <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>
2楼
这是因为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(' ', '_');
}
工作提琴：
3楼
$(el).children().innerHTML正在查看整行的所有文本。
那将不匹配您的字符串。
其他发行值有上限，表格中的值没有上限。
有一个下划线，而值没有。
您不应内联onchange事件，而应将onchange绑定到内部带有jQuery的该元素。
该代码已注释。
$(".filter").change(function() { var filterValue = $(this) .val() // get the value of the select .toLowerCase() // normalize it .replace(/\\s/g,'_'); // replace the spaces var rows = $('.record'); // grab all the rows rows.show(); // show them if (filterValue !== 'all') { // if we have all, than skip this rows .find("td.store") // find the store tds .filter(function() { // loop over read the text and see if it does not match the filter value return this.textContent.toLowerCase().trim() !== filterValue }) .parent() // find the trs .hide() // hide the table rows that do not match } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search-button"> <label for="filter">Store Name:</label> <select class="filter" data-tableId="table1"> <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>