来自<select>的过滤表使用 jQuery 输入 [英] Filter table from <select> input using jQuery
本文介绍了来自<select>的过滤表使用 jQuery 输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 jQuery 从字母 输入中过滤表格.
I'm trying to filter a table from an alphabetical <select> input with jQuery.
我在表格的两列中有名字和姓氏，我想按其中任一列过滤行.
I have first and last names in two columns of the table, and I'd like to filter the rows by either of these.
我有一个选择输入设置如下:
I have a select input set up as so:
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
...
</select>
我想过滤这个表:
<tr>
<td>Joe</td>
<td>Schmoe</td>
<td>$2482.79</td>
<td>172.78.200.124</td>
<td>http://gmail.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>$2776.09</td>
<td>119.232.182.142</td>
<td>http://www.example.com</td>
</tr>
我将如何使用 jQuery 过滤表格?
How would I go about filtering the table using jQuery?
推荐答案
假设您只有一个选择和一个表格结构像您的示例一样，这将起作用
This will work assuming you only have one select and one table that is stuctured like your example
$(document).ready(function($) {
var rows = $('table tr').each(function() {
var row = $(this);
var columns = row.children('td');
row.data('name-chars', [
columns.eq(0).html()[0].toUpperCase(),
columns.eq(1).html()[0].toUpperCase(),
]);
});
$('select').change(function() {
var char = $(this).val().toUpperCase();
rows.each(function() {
var row = $(this);
var chars_to_match = row.data('name-chars');
if($.inArray(char, chars_to_match) > -1) {
row.show();
}
else {
row.hide();
}
});
});
});
这篇关于来自<select>的过滤表使用 jQuery 输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
