通过下拉列表对表进行排序（简化代码） [英] Sort a table by drop down values (simplify my code)

问题描述

我有一张桌子。我希望用户能够通过在给定的下拉菜单中选择的选项来过滤表格。我有它的工作，但它是凌乱和难以添加新行（不能让它工作在jsfiddle，对不起 http://jsfiddle.net/anschwem/Y4cf6/2/ ）。任何简化的代码将不胜感激。而且，如果这个代码可以被限制为仅对某个表进行过滤，那么这将是很好的，所以我可以有很多表和许多下拉列表。如果这样做可以没有行ids，更好。谢谢！ 我的表/ html：

 < 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选项：selected'）。attr（'id'）==sel_All）{$（'＃catRow'）。show ）; $（ '＃catRow2'）显示（）; $（ '＃dogRow'）显示（）; $（ '＃dogRow2'）显示（）; $（ '＃birdRow'）显示（）。 （$（'＃selectFilter option：selected'）。attr（'id'）==selCats|| $（'＃selectFilter选项：selected'）。 '）'$（'＃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选项：selected'）。attr（'id'）==selBird s（＃catRow2）。hide（）; $（'＃catRow2'）。hide（ ）; $（'＃dogRow'）。hide（）; $（'＃dogRow2'）。hide（）; $（'＃birdRow'）。show（）;} 
< / script> 
  

解决方案

请找到重构代码 http://jsfiddle.net/5fZv7/3/ 这里和代码片段如下..

html代码：

 < select id =selectFilter> 
< option id =all>选择...< / 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> 
  

和JavaScript代码： / p>

  $（document）.load（function（）{
 $（'＃selectFilter'）。change ）{
 $（。all）。hide（）; 
 $（。+ $（this）.find（：selected）。attr（id）） （）; 
}）; 
}）; 
  

希望这有助于您轻松高效地维护代码。

I have a table. I want the user to be able to be able to filter the table by the option they pick in a given drop down. I have it working, but it's messy and hard to add new rows with (can't get it working in jsfiddle, sorry http://jsfiddle.net/anschwem/Y4cf6/2/). Any simplified code would be greatly appreciated. Also, it would be nice if this code could be restricted to only filtering a certain table, so I can have many tables and many drop downs. If this could be done without row ids, even better. Thanks! My table/html:

<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>

Code:

   <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>

解决方案

Please find the refactored code "http://jsfiddle.net/5fZv7/3/" here and the code snippet is as below..

html code:

<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>

and the javascript code:

 $(document).load(function () {
   $('#selectFilter').change(function () {
     $(".all").hide();
     $("." + $(this).find(":selected").attr("id")).show();
   });
 });

Hopes this helps you to maintain the code easily and efficiently.

这篇关于通过下拉列表对表进行排序（简化代码）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！