Javascript jQuery 表格行按列过滤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3459797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Table Row Filtering by Column
提问by Jimbo
I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.
我试图以一种智能的方式过滤表行（而不是最终完成工作的大量代码），但灵感却相当枯燥。
I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)
我的表中有 5 列。在每个顶部都有一个下拉列表或一个文本框，用户可以使用它来过滤表格数据（基本上隐藏不适用的行）
There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|
jQuery 有很多表格过滤插件，但没有一个能像这样工作，这就是复杂的部分：|
回答by Jeff Treuting
Here is a basic filter example http://jsfiddle.net/urf6P/3/
这是一个基本的过滤器示例http://jsfiddle.net/urf6P/3/
It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.
它使用 jquery 选择器 :contains('some text') 和 :not(:contains('some text')) 来决定是否应该显示或隐藏每一行。这可能会让你朝着一个方向前进。
EDITED to include the HTML and javascript from the jsfiddle:
编辑以包含来自 jsfiddle 的 HTML 和 javascript：
$(function() {
$('#filter1').change(function() {
$("#table td.col1:contains('" + $(this).val() + "')").parent().show();
$("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
});
});
回答by Fr0zenFyr
Slightly enhancing the accepted solutionposted by Jeff Treuting, filtering capability can be extended to make it case insensitive. I take no credit for the original solution or even the enhancement. The idea of enhancement was lifted from a solution posted on a different SO postoffered by Highway of Life.
略微增强Jeff Treuting发布的已接受解决方案，可以扩展过滤功能以使其不区分大小写。我不相信原始解决方案甚至增强功能。增强的想法来自于在Highway of Life提供的不同 SO 帖子上发布的解决方案。
Here it goes:
它是这样的：
// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
return $(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
// Now perform the filtering as suggested by @jeff
$(function() {
$('#filter1').on('keyup', function() { // changed 'change' event to 'keyup'. Add a delay if you prefer
$("#table td.col1:icontains('" + $(this).val() + "')").parent().show(); // Use our new selector icontains
$("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide(); // Use our new selector icontains
});
});
回答by Nate Pinchot
This may not be the best way to do it, and I'm not sure about the performance, but an option would be to tag each column (in each row) with an id starting with a column identifier and then a unique number like a record identifier.
这可能不是最好的方法，我不确定性能，但一个选项是用一个以列标识符开头的 id 标记每一列（在每一行中），然后是一个唯一的数字，如记录标识符。
For example, if you had a column Produce Name, and the record ID was 763, I would do something like the following:
例如，如果您有一个列 Produce Name，并且记录 ID 是 763，我将执行以下操作：
??<table id="table1">
<thead>
<tr>
<th>Artist</th>
<th>Album</th>
<th>Genre</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td id="artist-127">Red Hot Chili Peppers</td>
<td id="album-195">Californication</td>
<td id="genre-1">Rock</td>
<td id="price-195">.99</td>
</tr>
<tr>
<td id="artist-59">Santana</td>
<td id="album-198">Santana Live</td>
<td id="genre-1">Rock</td>
<td id="price-198">.99</td>
</tr>
<tr>
<td id="artist-120">Pink Floyd</td>
<td id="album-183">Dark Side Of The Moon</td>
<td id="genre-1">Rock</td>
<td id="price-183">.99</td>
</tr>
</tbody>
</table>
You could then use jQuery to filter based on the start of the id.
然后，您可以使用 jQuery 根据id.
For example, if you wanted to filter by the Artist column:
例如，如果您想按艺术家列进行过滤：
var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
if (!regex.test(this.innerHTML)) {
this.parentNode.style.backgroundColor = '#ff0000';
}
});
回答by solanki...
step:1write the following in .html file
步骤：1在 .html 文件中写入以下内容
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
step:2write the following in .js file
步骤：2在 .js 文件中写入以下内容
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
