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.