折りたたまれた状態の表の列を表示

Question

私は結果をHTMLテーブルに生成するPythonスクリプトにHTMLフォームを送信しています。ただし、テーブルがページに表示されたとき、私はいくつかの列が折りたたまれた状態になりたいので、私はそうのように、チェックボックスとそれらを展開することができます：

$(document).ready(function(){ 
    $(".collapse").hide(); 
    $("#checkme").click(function(){ 
     if($("#checkme").is(":checked")){ 
      $(".collapse").show(); 
     }else{ 
      $(".collapse").hide(); 
     } 
    }); 
}); 

トラブルで、表には、ときにすべての列に消費します最初は読み込まれていて、デフォルトで折りたたまれた状態になります（つまり、列は非表示になっています）。テーブルが完全に読み込まれ、列の一部が折りたたまれるまで、「読み込み中...」というテキストが表示されるようにするにはどうすればよいですか？
事前に感謝します。

Answer 1

セットテーブルの可視性が最初に隠された、とDOMの準備ができたときに、この

$(document).ready(function(){ $("table.mygrid").show();}); 

Answer 2

は、あなたが実際に単にCSSでこれを定義することができません。

.collapse { 表示：なし; }

Answer 3

マークアップを生成するときは、非表示にする列の各表のセルに 'hideable-cell'などのクラスを配置します。表の上に、 'table-hide-hideable-cells'というクラスを追加します。 CSSで

<table id="the-table" class="table-hide-hideable-cells"> 
    <tr> 
    <td>Name</td> 
    <td class="hideable-cell">Hide me</td> 
    </tr> 
</table> 

：テーブルがレンダリングされるとき

table.table-hide-hideable-cells .hideable-cell {display: none} 

は今、これらの細胞は、デフォルトでは非表示になります。それらを表示するには、 'table-hide-hideable-cells'クラスをテーブルから削除するだけです。親要素に単一のセレクタが、子要素のコレクションのスタイルを制御することができる私は、頻繁にこの技術を使用

$(document).delegate('#checkme', 'click', function() { 
    $('#the-table').toggleClass('table-hide-hideable-cells'), !$(this).is(':checked')); 
}); 

。