選択オプション（jQuery）に基づいて表の列を表示/非表示

Question

テーブルを表示したいが、選択要素の選択に基づいて特定の列のみを表示したい。

<table> 
<thead> 
<td colspan="5"> 
<SELECT name="menu"> 
     <option value="eur">EUR</option> 
     <option value="thb">THB</option> 
     <option value="btc">BTC</option> 
     <option value="eth">ETH</option> 
     <option value="xmr">XMR</option> 
     </SELECT> 
</td> 
</thead> 
<tbody> 
    <tr> 
     <td>column 1</td> 
     <td>column 2</td> 
     <td>column 3</td> 
     <td>column 4</td> 
     <td>column 5</td> 
    </tr> 
    <tr> 
     <td>column 1</td> 
     <td>column 2</td> 
     <td>column 3</td> 
     <td>column 4</td> 
     <td>column 5</td> 
    </tr> 
    </tbody> 
</table> 

Javascriptを：

$(document).on('change', 'table thead select', function() { 
    var selected = $(this).is(":selected"); 

    var index = $(this).parent().index(); 
     $('table tbody tr').each(function() { 
      if(selected) { 
       $(this).find("td").eq(index).show(); 
      } else { 
       $(this).find("td").eq(index).hide(); 
      } 
     }); 
}); 

コードは、1時間のために働きます。 https://jsfiddle.net/jsrookey/z8pj7dns/

Answer 1

1. ん
2. のインデックスを取得し、選択取得するには：最初に選択を変更した後、しかし、テーブルの列はもう更新されません... ここでは、上記のコードのフィドルですオプション
3. 表示上のすべてのTD選択セレクトその後、選択されたオプションのインデックスを隠す

$(document).on('change', 'table thead select', function() { 
 

 
    var index = $('option:selected',this).index(); 
 
    
 
    console.log(index) 
 
    $('table tbody tr').each(function() { 
 
     $(this).find("td").show(); 
 
     $(this).find("td:nth-child("+index+")").hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <td colspan="5"> 
 
     <SELECT name="menu"> 
 
     <option value="eur">EUR</option> 
 
     <option value="thb">THB</option> 
 
     <option value="btc">BTC</option> 
 
     <option value="eth">ETH</option> 
 
     <option value="xmr">XMR</option> 
 
     </SELECT> 
 
    </td> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>column 1</td> 
 
     <td>column 2</td> 
 
     <td>column 3</td> 
 
     <td>column 4</td> 
 
     <td>column 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>column 1</td> 
 
     <td>column 2</td> 
 
     <td>column 3</td> 
 
     <td>column 4</td> 
 
     <td>column 5</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

両方の変数を必要とするわけではありません。インデックス用の変数で十分です。

$(document).on('change', 'table thead select', function() { 
 
    var index = $(this).find("option:selected").index(); 
 
    $('table tbody td').show(); 
 
    $('table tbody tr').each(function() { 
 
    $(this).find("td:eq(" + index + ")").hide(); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <td colspan="5"> 
 
     <SELECT name="menu"> 
 
     <option value="eur">EUR</option> 
 
     <option value="thb">THB</option> 
 
     <option value="btc">BTC</option> 
 
     <option value="eth">ETH</option> 
 
     <option value="xmr">XMR</option> 
 
     </SELECT> 
 
    </td> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>column 1</td> 
 
     <td>column 2</td> 
 
     <td>column 3</td> 
 
     <td>column 4</td> 
 
     <td>column 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>column 1</td> 
 
     <td>column 2</td> 
 
     <td>column 3</td> 
 
     <td>column 4</td> 
 
     <td>column 5</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

あなたはこのコード行を変更する必要があります。

var index = $(this).parent().index(); 

インデックスは常に現在0であることを、私はそれが唯一の可能性があるので初めての作品、なぜそれがだと思います0を一度隠す。あなたの実際に選択の親を得て！これに変更してください：

var index = $(this).find("option:selected").index();