jQueryを使用してテーブルの列を非表示にする

Question

jQueryを使用してテーブルのテーブルの列を非表示にしようとしていますが、実際の方法はわかりません。私は各列のドロップダウンを持っていて、hideとshowの2つのオプションを持っています。.hide()関数を使ってカラム0を非表示にしたいと思っています。

Answer 1

:nth-child疑似セレクタは、その位置に基づいて要素を選択します。たとえば、5番目の列を選択する場合は、$("td:nth-child(5)")を使用できます。

実装は次のようになります。ここでは

$("#mytable td:nth-child(5)").hide(); //or .hide(), or .toggle() 

Answer 2

var $col_select = $('#col-select'), 
    $opt_select = $('#opt-select'), 
    $my_table = $('table'); 
$col_select.add($opt_select).on('change', function() { 
    var col_val = $col_select.children(':selected').val(), 
     opt_val = $opt_select.children(':selected').val(); 
    if (col_val !== '' && opt_val !== '') { 
     $my_table.find('td:nth-child(' + col_val + ')').css('display', opt_val); 
    } 
}); 

デモです：http://jsfiddle.net/RjXpq/2/