displaying table columns in collapsed state

I'm submitting a HTML form to a Python script that generates results in HTML table. However, when the table is displayed in the page I want some columns to be in collapsed state, so I could expand them with a checkbox, like so:

$(document).ready(function(){
   $(".collapse").h开发者_如何学JAVAide();
   $("#checkme").click(function(){
       if($("#checkme").is(":checked")){
           $(".collapse").show();
       }else{
           $(".collapse").hide();
       }
   });
});

The trouble is, table expends to all the columns when it's initially being loaded and then defaults to collapsed state (ie, the columns are hidden). How can I have a "Loading..." text displayed until the table is completely loaded with some of its columns collapsed?

Many thanks in advance.

Set table visibility hidden initially, and when the DOM is ready do this

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

you can actually simply define this in CSS:

.collapse { display:none; }

When you generate your markup, place a class on each table cell in the columns you wish to hide such as 'hideable-cell'. On the table, add a class called 'table-hide-hideable-cells'.

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

In CSS:

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

Now when the table is rendered, those cells will be hidden by default. To show them, just remove the 'table-hide-hideable-cells' class from the table.

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

I use this technique frequently, whereby a single selector on a parent element can control the styling of a collection of child elements.