Question

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").hide();
   $("#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.

Answer 1

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

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