What is the best way to show/hide n number of columns ?

Question

Hi,
I have a dynamic report that I have show/hide columns working using the below code. But when there are 500 or more rows it takes about a minute or more just waiting to see the columns toggle.
What is the best way to do this?
// Existing Javascript
[script language="JavaScript" type="text/javascript"]
var maxcnt= mymonths.length;
function hideMaxEarn(){
for(var j=0;j[maxcnt;j++){
hideColumn('MON'+mymonths[j],'MAXCOL'+mymonths[j]);
hideColumn('MON'+mymonths[j],'EARNCOL'+mymonths[j]);
hideColumn('MON13','MAXCOL13');
hideColumn('MON13','EARNCOL13');
function showMaxEarn(){
for(var j=0;j[maxcnt;j++){
showColumn('MON'+mymonths[j],'MAXCOL'+mymonths[j]);
showColumn('MON'+mymonths[j],'EARNCOL'+mymonths[j]);
showColumn('MON13','MAXCOL13');
showColumn('MON13','EARNCOL13');
function getCellIndex(pRow,pCell){ 
for(var i=0, n=pRow.cells.length;i[n;i++){ 
    if(pRow.cells[i] == pCell) return i;
function hideColumn(pMon,pCol){
var l_Cell = $x(pCol);
var l_Table = html_CascadeUpTill(l_Cell,'TABLE');
var l_Rows = l_Table.rows;
l_CellI = getCellIndex(l_Cell.parentNode,l_Cell);
for (var i=0, n=l_Rows.length;i[n;i++){
    if(i != 0) {
       html_HideElement(l_Rows[i].cells[l_CellI]);
} else {
$x(pMon).colSpan = $x(pMon).colSpan - 1;
function showColumn(pMon,pCol){
var l_Cell = $x(pCol);
var l_Table = html_CascadeUpTill(l_Cell,'TABLE');
var l_Rows = l_Table.rows;
l_CellI = getCellIndex(l_Cell.parentNode,l_Cell);
for (var i=0, n=l_Rows.length;i[n;i++){
    if(i != 0) {
       html_ShowElement(l_Rows[i].cells[l_CellI]);
} else {
$x(pMon).colSpan = 3;
return;
[script]

Answer 1

Hi Andy,
Yes, I replaced the code calling the same things in a loop to one loop getting the Table reference once and I build an array of column numbers at the time the report is built so I don't have to get the column number each time....
it is a couple of seconds faster in about a 30 second response time. It will have to do it for now, no more time unless you see something in this new code...
Thank you! Bill
// dynamically built code
col_nbr_array = new Array();
col_nbr_array[0] = "1";
col_nbr_array[1] = "2";
col_nbr_array[2] = "4";
col_nbr_array[3] = "5";
col_nbr_array[4] = "7";
col_nbr_array[5] = "8";
col_nbr_array[6] = "10";
col_nbr_array[7] = "11";
col_nbr_array[8] = "13";
col_nbr_array[9] = "14";
col_nbr_array[10] = "16";
col_nbr_array[11] = "17";
col_nbr_array[12] = "19";
col_nbr_array[13] = "20";
col_nbr_array[14] = "22";
col_nbr_array[15] = "23";
col_nbr_array[16] = "25";
col_nbr_array[17] = "26";
col_nbr_array[18] = "28";
col_nbr_array[19] = "29";
col_nbr_array[20] = "31";
col_nbr_array[21] = "32";
col_nbr_array[22] = "34";
col_nbr_array[23] = "35";
col_nbr_array[24] = "37";
col_nbr_array[25] = "38";
col_nbr_array[26] = "40";
col_nbr_array[27] = "41";
// Static code
function show_hide_column(do_show) {
// Set Style, Show/Hide
var stl;
var csp;
if (do_show){
stl = 'block'
csp = 3;
}else{
stl = 'none';     
csp = 1;     
// get rows object
var l_Rows = document.getElementById('DT_RANGE').rows;
var totCellNbr1=parseFloat(col_nbr_array[maxcnt-1])+2;
var totCellNbr2=totCellNbr1 +1;
var n=l_Rows.length;
for (var i=0; i[n;i++){
    if(i != 0) { // if not the main header which spans 3 cols when expanded
      // Go through and show/hide each cell
      for(var j=0;j[maxcnt;j++){
          l_Rows[i].cells[col_nbr_array[j]].style.display = stl;
// Totals
l_Rows.cells[totCellNbr1].style.display=stl;
l_Rows[i].cells[totCellNbr2].style.display=stl;
} else { // row 1 that has Month spelled out - colspan of 3, others has max,earned and score columns for each month.
var maxhdr = maxcnt/2;
for(var k=1;k[=maxhdr;k=k+1){
//alert('Header['+k+']');
l_Rows[i].cells[k].colSpan=csp;
// Total column
//alert('TotHeader['+(maxhdr+1)+']');
l_Rows[i].cells[maxhdr+1].colSpan=csp;
[script]