Javascript 按下拉值对表格排序（简化我的代码）
我有一张桌子。我希望用户能够通过在给定下拉列表中选择的选项筛选表。我让它工作，但它很混乱，很难添加新行（抱歉，无法在JSFIDLE中工作）。任何简化的代码都将不胜感激。另外，如果这段代码可以限制为只过滤某个表，那么我就可以有许多表和许多下拉列表。如果这可以在没有行ID的情况下完成，那就更好了。谢谢我的表格/html:Javascript 按下拉值对表格排序（简化我的代码）,javascript,jquery,select,drop-down-menu,filter,Javascript,Jquery,Select,Drop Down Menu,Filter,我有一张桌子。我希望用户能够通过在给定下拉列表中选择的选项筛选表。我让它工作，但它很混乱，很难添加新行（抱歉，无法在JSFIDLE中工作）。任何简化的代码都将不胜感激。另外，如果这段代码可以限制为只过滤某个表，那么我就可以有许多表和许多下拉列表。如果这可以在没有行ID的情况下完成，那就更好了。谢谢我的表格/html: <table> <tr id="catRow"> <td id="cats">cats</td> </tr> <
<table>
<tr id="catRow">
<td id="cats">cats</td>
</tr>
<tr id="catRow2">
<td id="cats">cats</td>
</tr>
<tr id="dogRow">
<td id="dogs">dogs</td>
</tr>
<tr id="birdRow">
<td id="birds">birds</td>
</tr>
<tr>
<td id="dogRow2">dogs</td>
</tr>
</table>
<select id="selectFilter">
<option id="sel_All">Select...</option>
<option id="selCats">Cats</option>
<option id="selDogs">Dogs</option>
<option id="selBirds">Birds</option>
</select>
<script type='text/javascript'>
$(window).load(function(){
$('select').change(function() {
if($('#selectFilter option:selected').attr('id') == "sel_All" || $('#selectFilter option:selected').attr('id') == "sel_All"){$('#catRow').show();$('#catRow2').show();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').show();}
if($('#selectFilter option:selected').attr('id') == "selCats" || $('#selectFilter option:selected').attr('id') == "selCats"){$('#catRow').show();$('#catRow2').show();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').hide();}
if($('#selectFilter option:selected').attr('id') == "selDogs" || $('#selectFilter option:selected').attr('id') == "selDogs"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').hide();}
if($('#selectFilter option:selected').attr('id') == "selBirds" || $('#selectFilter option:selected').attr('id') == "selBirds"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').show();}
</script>
猫
猫
狗
鸟
狗
选择。。。
猫
狗
鸟
<table>
<tr id="catRow">
<td id="cats">cats</td>
</tr>
<tr id="catRow2">
<td id="cats">cats</td>
</tr>
<tr id="dogRow">
<td id="dogs">dogs</td>
</tr>
<tr id="birdRow">
<td id="birds">birds</td>
</tr>
<tr>
<td id="dogRow2">dogs</td>
</tr>
</table>
<select id="selectFilter">
<option id="sel_All">Select...</option>
<option id="selCats">Cats</option>
<option id="selDogs">Dogs</option>
<option id="selBirds">Birds</option>
</select>
<script type='text/javascript'>
$(window).load(function(){
$('select').change(function() {
if($('#selectFilter option:selected').attr('id') == "sel_All" || $('#selectFilter option:selected').attr('id') == "sel_All"){$('#catRow').show();$('#catRow2').show();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').show();}
if($('#selectFilter option:selected').attr('id') == "selCats" || $('#selectFilter option:selected').attr('id') == "selCats"){$('#catRow').show();$('#catRow2').show();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').hide();}
if($('#selectFilter option:selected').attr('id') == "selDogs" || $('#selectFilter option:selected').attr('id') == "selDogs"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').hide();}
if($('#selectFilter option:selected').attr('id') == "selBirds" || $('#selectFilter option:selected').attr('id') == "selBirds"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').show();}
</script>
$（窗口）。加载（函数（）{
$（'select'）.change（函数（）{
if（$（'selectFilter option:selected'）.attr（'id'）==“sel#u All”|$（'selectFilter option:selected'）.attr（'id'）==“sel#All”）{$（'catRow'）.show（）；$（'catRow2'）.show（）；$（'dogRow'）.show（）$（'dogRow2'）.show（）；$）（'dogRow2'）.show（）。$）（'
如果（$（'selectFilter option:selected'）.attr（'id'）==“selCats”|$（'selectFilter option:selected'）.attr（'id'）==“selCats”）{$（'catRow'）.show（）；$（'catRow2'）.show（）；$（'dogRow'）.hide（）$（'dogRow2'）.hide（））.hide（）（'birdRow'）.hide（））
如果（$（'selectFilter option:selected'）.attr（'id'）==“selDogs”|$（'selectFilter option:selected'）.attr（'id'）==“selDogs”）{$（'catRow'）.hide（）；$（'catRow2'）.hide（）；$（'dogRow'）.show（）$（'dogRow2'）.show（）。$（'dogRow2'）.show（））.show（）（'birdRow'）.hide（））
如果（$（'selectFilter option:selected'）.attr（'id'）==“selBirds”|$（'selectFilter option:selected'）.attr（'id'）==“selBirds”）{$（'catRow'）.hide（）$（'catRow2'）.hide（）；$（'dogRow'）.hide（）$（'dogRow2'）.hide（）$）.hide（）（'dogRow2'）.hide（）。$（'birdRow'）.show（））
一开始可能有点像学习曲线，但最终会更加灵活。您可以这样更改html标记
<table id='animal'>
<tr class="cat">
<td>cats</td>
</tr>
<tr class="cat">
<td>cats</td>
</tr>
<tr class="dog">
<td>dogs</td>
</tr>
<tr class="bird">
<td>birds</td>
</tr>
<tr class='dog'>
<td>dogs</td>
</tr>
</table>
<select id="selectFilter">
<option value=''>Select...</option>
<option value='cat'>Cats</option>
<option value='dog'>Dogs</option>
<option value='bird'>Birds</option>
</select>
您可以这样更改html标记
<table id='animal'>
<tr class="cat">
<td>cats</td>
</tr>
<tr class="cat">
<td>cats</td>
</tr>
<tr class="dog">
<td>dogs</td>
</tr>
<tr class="bird">
<td>birds</td>
</tr>
<tr class='dog'>
<td>dogs</td>
</tr>
</table>
<select id="selectFilter">
<option value=''>Select...</option>
<option value='cat'>Cats</option>
<option value='dog'>Dogs</option>
<option value='bird'>Birds</option>
</select>
我已经重构了你的小提琴： 通过利用CSS类和“value”等内置属性，我们可以轻松地使此代码更通用 对于此HTML：
<table id="animals">
<tr class="cat">
<td>Cat 1</td>
</tr>
<tr class="cat">
<td>Cat 2</td>
</tr>
<tr class="dog">
<td>Dog 1</td>
</tr>
<tr class="cat">
<td>Cat 3</td>
</tr>
<tr class="bird">
<td>Bird 1</td>
</tr>
<tr class="cat">
<td>Cat 4</td>
</tr>
<tr class="dog">
<td>Dog 2</td>
</tr>
</table>
<select id="selectFilter">
<option>Select...</option>
<option value="cat">Cats</option>
<option value="dog">Dogs</option>
<option value="bird">Birds</option>
</select>
编辑：这种方法无法处理的一种情况是让您能够再次显示所有行。我将把它作为练习留给您，但这里有一个提示：您可以读取
$（this）.val（）的值，如果没有值，则显示所有行，而不是过滤它们。我已经重构了您的小提琴：
通过利用CSS类和“value”等内置属性，我们可以轻松地使此代码更通用
对于此HTML：
<table id="animals">
<tr class="cat">
<td>Cat 1</td>
</tr>
<tr class="cat">
<td>Cat 2</td>
</tr>
<tr class="dog">
<td>Dog 1</td>
</tr>
<tr class="cat">
<td>Cat 3</td>
</tr>
<tr class="bird">
<td>Bird 1</td>
</tr>
<tr class="cat">
<td>Cat 4</td>
</tr>
<tr class="dog">
<td>Dog 2</td>
</tr>
</table>
<select id="selectFilter">
<option>Select...</option>
<option value="cat">Cats</option>
<option value="dog">Dogs</option>
<option value="bird">Birds</option>
</select>
编辑：有一种情况没有处理，那就是给你一种再次显示所有行的方法。我将把它作为练习留给你，但这里有一个提示：你可以读取$（this.val（）
）的值，如果没有值，则显示所有行，而不是过滤它们。请查找重构代码“下面是代码片段
html代码：
<select id="selectFilter">
<option id="all">Select...</option>
<option id="cats">Cats</option>
<option id="dogs">Dogs</option>
<option id="birds">Birds</option>
</select>
<table border="1">
<tr class="all cats">
<td>cats</td>
</tr>
<tr class="all cats">
<td>cats 2</td>
</tr>
<tr class="all dogs">
<td>dogs</td>
</tr>
<tr class="all birds">
<td>birds</td>
</tr>
希望这能帮助您轻松高效地维护代码。请在此处找到重构代码“”，代码片段如下所示
html代码：
<select id="selectFilter">
<option id="all">Select...</option>
<option id="cats">Cats</option>
<option id="dogs">Dogs</option>
<option id="birds">Birds</option>
</select>
<table border="1">
<tr class="all cats">
<td>cats</td>
</tr>
<tr class="all cats">
<td>cats 2</td>
</tr>
<tr class="all dogs">
<td>dogs</td>
</tr>
<tr class="all birds">
<td>birds</td>
</tr>
希望这能帮助您轻松高效地维护代码。我不能使用datatables。这很神奇，但太重了。我必须围绕它重建整个网站。相信我，我已经尝试过了。太糟糕了。你是说太重了，因为它使用起来很复杂吗？你能详细说明你正在构建什么吗？我有下面的解决方案。我正在修复一个非常破碎的网站，这是一种修补工作。任何新的脚本都会抛开一切，所以我需要简单的解决方案。我不能使用数据表。这很神奇，但太重了。我必须围绕它重建整个网站。相信我，我试过了。太糟糕了。你是说太重了，因为它使用起来很复杂吗？你能详细说明你是什么吗构建？我得到了下面的解决方案。我正在修复一个非常破碎的站点，这是一种修补工作。任何新脚本都会抛开一切，所以我需要简单的解决方案。等等..你想排序或筛选吗？我可能误解了你可能想链接到一个正在工作的JSFIDLE。等等..你想排序或筛选吗？我可能误解了你可能想只需记住，ID在整个文档中应该是唯一的，而类在具有相同类型或“类”的任何地方都可以重用--内容！呃，试图在页面上实现它，它清除了我的整个表。：/对于这种情况，这不是一个解决方案。可能是页面上的标记有问题--请检查fiddle以获得一个工作示例。这很好。唯一奇怪的是，如果没有选择筛选器。为什么所有tr都被隐藏？请记住，ID在整个do中应该是唯一的而类在任何具有相同类型或“类”的地方都可以重用--内容！呃，试图在页面上实现它，它清除了我的整个表。：/对于这种情况，这不是一个解决方案。可能是页面上的标记有问题--检查小提琴以获得一个工作示例。这很好。唯一奇怪的是，如果没有选择筛选器。为什么所有tr都被隐藏？它没有进行任何更改。不确定要告诉你什么.@triplethreat77是否将trid的
更改为类？确保您的选项也具有正确的值..并始终将这些绑定代码包装在文档中。准备好了吗？如果您感兴趣，另一种筛选情况是：它没有做任何更改。不确定要告诉您什么。@triplethreat77是否更改了trid的
到类？确保您的选项也具有正确的值..并始终将这些绑定代码包装在文档中。准备好了吗？如果需要，请使用其他筛选用例