1

私はテーブルを持っています。ユーザーが特定のドロップダウンで選択したオプションでテーブルをフィルターできるようにしたいと考えています。私はそれを機能させましたが、新しい行を追加するのは面倒で難しいです（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>
4

4 に答える 4

4

私はあなたのフィドルをリファクタリングしました: 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();
});

編集:これが処理しない 1 つのケースは、すべての行を再度表示する方法を提供することです。これは演習として残しておきますが、ここにヒントが$(this).val()あります。

于 2013-01-25T20:42:17.040 に答える
2

このように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>

次に、あなたのjQuery

$('#selectFilter').change(function(){
    var trs = $('#animal tr'); 
    if(this.value == ''){  // if first option picked show all
         trs.show(); 
    }else{
       var $el = $('.'+this.value);  // element to show
       trs.not($el).hide(); // hide all but the elements to show
       $el.show();       // show elements
    }
});

フィドル

于 2013-01-25T20:39:44.597 に答える
2

リファクタリングされたコード " http://jsfiddle.net/5fZv7/3/ " を見つけてください。コード スニペットは以下のとおりです。

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>

そしてJavaScriptコード：

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

これが、コードを簡単かつ効率的に維持するのに役立つことを願っています。

于 2013-01-25T20:59:41.183 に答える
1

DataTablesをチェックアウトする必要があります。この種のフィルタリングが組み込まれています ( APIの fnFilter )

最初は少し学習曲線が長いかもしれませんが、最終的にははるかに柔軟になります。

于 2013-01-25T20:37:42.400 に答える