Running a script automatically..

BenBox · 07-09-2006, 08:43 PM

Hey all,

I've written a function which toggles columns in a table to be shown/hidden.

Theres basically 6 columns. When I click on a link to execute the script it toggles between showing the first 5 columns, and the first and last.

However, when the page intially loads all 6 columns are shown.. which I don't want. So, my question is how can I get the function to automatically execute when the page loads? (without using the body onLoad tag, because that is all defined beforehand..)

Thanks for any help/directions!

brandonH · 07-09-2006, 10:59 PM

can you provid the exact source of this , it would help in helping you.

you can try using the style attribute of the elements.

style="visibility:hidden;"

or what you originally asked....

set the call to the function after the </body> tag.

the script will work becuase once the </body> tag has been loaded into the user browser, the body has been defined along with all elements within in.

BenBox · 07-12-2006, 10:02 AM

Hey!

Thanks for the reply! I can see how that visibility thing will work (I got it half working, but not how I wanted it too.. not sure how to go about it)

This is my code below (with a simplified table so it doesn't take up 300 lines!)

Initally, all columns are shown.. but I need it so the toggle is activated immediately (hiding the last column) and only showing 1-3..

Hope this helps,

Thanks for the help!

Code:

<script>
<!-- 
var colSwitch = true;

function switchColumns(table_id, firstColSet, secondColSet) {
	
    if (colSwitch) 	colSwitch = false
    else           	colSwitch = true;
	
    var style;

	var columnArray = firstColSet.split(',');	
	for (var i=0; i<columnArray.length; i++) {	
  	 	var tbl  = document.getElementById(table_id);
    	var rows = tbl.getElementsByTagName('tr');

    	if (colSwitch) 	style = 'block'
    	else          	style = 'none';

    	for (var row=0; row<rows.length; row++) {
      		var cels = rows[row].getElementsByTagName('td')
      		cels[columnArray[i]].style.display=style;
    	}	    	
    }
    
	var columnArray2 = secondColSet.split(',');	
	for (var i=0; i<columnArray2.length; i++) {	
  	 	var tbl  = document.getElementById(table_id);
    	var rows = tbl.getElementsByTagName('tr');

    	if (colSwitch) 	style = 'none'
    	else          	style = 'block';

    	for (var row=0; row<rows.length; row++) {
      		var cels = rows[row].getElementsByTagName('td')
      		cels[columnArray2[i]].style.display=style;
    	}	    	
    }    
    
    
}

-->
</script>
<p><a href="javascript:switchColumns('thisTable', '1,2', '3');">Toggle columns</a></p>
<table width="100%" border="1" id="thisTable">
  <tr> 
    <td width="50%">Col1</td>
    <td width="25%">Col2</td>
    <td width="25%">Col3</td>
    <td width="50%">Col4</td>
  </tr>
</table>

vwphillips · 07-12-2006, 01:35 PM

Dom may be an option

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body onload="Init('thisTable');Cols('thisTable');">

<script>

var UseCols='0:3';


function Init(id){
 var tbdy=document.getElementById(id);
 var rows=tbdy.getElementsByTagName('TR');
 tbdy.ary=[];
 for (var zxc0=0;zxc0<rows.length;zxc0++){
  tbdy.ary[zxc0]=[];
  var cols=rows[zxc0].getElementsByTagName('TD');
  for (var zxc1=0;zxc1<cols.length;zxc1++){
   tbdy.ary[zxc0].push(cols[zxc1]);
  }
 }
}

function Cols(id,usec){
 var tbdy=document.getElementById(id);
 var rows=tbdy.getElementsByTagName('TR');
 for (var zxc0=0;zxc0<rows.length;zxc0++){
  for (var zxc1=0;zxc1<tbdy.ary[zxc0].length;zxc1++){
   if (tbdy.ary[zxc0][zxc1].parentNode==rows[zxc0]){ rows[zxc0].removeChild(tbdy.ary[zxc0][zxc1]); }
  }
 }
 for (var zxc2=0;zxc2<rows.length;zxc2++){
  for (var zxc3=0;zxc3<tbdy.ary[zxc2].length;zxc3++){
   if (UseCols.match(zxc3)){
    rows[zxc2].appendChild(tbdy.ary[zxc2][zxc3]);
   }
  }
 }
 UseCols=(UseCols=='0:3')?'1:2':'0:3';
}

-->
</script>
<p><a href="javascript:Cols('thisTable');">Toggle columns</a></p>
<table width="100%" border="1" >
 <tbody  id="thisTable" >
  <tr>
    <td width="50%">Col1</td>
    <td width="25%">Col2</td>
    <td width="25%">Col3</td>
    <td width="50%">Col4</td>
  </tr>
  <tr>
    <td width="50%">Col1</td>
    <td width="25%">Col2</td>
    <td width="25%">Col3</td>
    <td width="50%">Col4</td>
  </tr>
 </tbody>
</table>

</body>

</html>