javascript - 按下拉值对表格进行排序(简化我的代码)

Question

我有一张 table 。我希望用户能够通过他们在给定下拉列表中选择的选项来过滤表格。我让它工作，但是添加新行很麻烦而且很难(不能让它在 jsfiddle 中工作，抱歉 http://jsfiddle.net/anschwem/Y4cf6/2/ )。任何简化的代码将不胜感激。此外，如果可以将此代码限制为仅过滤某个表，那就太好了，这样我就可以有很多表和很多下拉菜单。如果这可以在没有行 ID 的情况下完成，那就更好了。谢谢! 我的表格/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 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>

Answer 1

我重构了你的 fiddle :http://jsfiddle.net/Y4cf6/4/

通过利用 CSS 类和内置属性(如“值”)，我们可以轻松地使这段代码更加通用。

对于这个 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>

Javascript 本质上被简化为一行代码:

$("#selectFilter").on("change", function() {
    $("#animals").find("tr").hide().filter("." + $(this).val()).show();
});

编辑:它没有处理的一种情况是为您提供了一种再次显示所有行的方法。我将把它留给你作为练习，但这里有一个提示:你可以读取 $(this).val() 的值，如果没有值，则显示所有行而不是过滤它们。