Aggiungere funzione all'onload non carica elementi se hell'head

**kluster** · 10-02-2006, 13:58

Dunque, stavo facendo delle prove ed ho fatto questa funzione e per colorare alternativamente le righe di una tabella:

lo script:

codice:

<style type="text/css">
	#tbl_color {border:1px solid #707070;font-family:"Trebuchet MS", Verdana, sans-serif;font-size:0.8em}
	#tbl_color td {border:1px solid black}
	.trNormal   {background-color:#FFF}
	.trAlternate { background-color:#66CCFF}
</style>
<script type="text/javascript">
	//=====================================================================
	// Event Listener
	// by Scott Andrew - http://scottandrew.com
	// edited by Mark Wubben, <useCapture> is now set to false
	//=====================================================================
	
	function addEvent(obj, evType, fn){
		if(obj.addEventListener){
			obj.addEventListener(evType, fn, false); 
			return true;
		} else if (obj.attachEvent){
			var r = obj.attachEvent('on'+evType, fn);
			return r;
		} else {
			return false;
		}
	}
	function AlternateColorTable(idTable,cssNormal,cssAlternate)
	{
		if(document.getElementById && document.createElement)
		{
			alert(document.getElementById(idTable));
			var allTr = document.getElementById(idTable).getElementsByTagName('TR');
			for (var i=0;i<allTr.length;i++) 
				{
				  var currentTR = allTr[i];
				  {
				   if (i%2==0) 	currentTR.setAttribute("class", cssNormal);
				   else 	    currentTR.setAttribute("class", cssAlternate);
				  }
				}
		}
	}
addEvent(window, "load", AlternateColorTable("tbl_color","trNormal","trAlternate"));
	
</script>
</head>
<body>
<table id="tbl_color" cellpadding="0" cellspacing="2">
	<% 'uso asp tanto per non scrivere a mano l'esempio
        for i = 0 to 20 %>
		<tr>
			<td>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna. Proin commodo. Integer pellentesque elementum orci. </td>
		</tr>
	<% 	next %>
	</table>
</body>

Lo script ha un deficit: se inserito normalmente cosi' come lo vedete l'AddEvent nell'head non ha ancora caricato l'id e risulta null
Se il richiamo lo metto dopo la tabella allora funziona tutto bene.

codice:

<table id="tbl_color">
....
</table>
<script type="text/javascript">
addEvent(window, "load", AlternateColorTable("tbl_color","trNormal","trAlternate"));
</script>

nell'ottica di renderlo unobtrusive volevo lasciare il richiamo esterno nell'head tramite src ma non mi vuole funzionare.
Avete dei suggerimenti?

L'esempio funzionante QUI ha l'addevent inserito dopo la tabella

**kluster** · 10-02-2006, 15:31

Risolto, il problema è nell'AddEvent.
Non supporta parametri nella funzione.
Ho dovuto dichiarare delle var che identificassero i parametri.

Se servisse a qualcuno pubblico qui lo script finale

codice:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Altenate Colored Table</title>
<style type="text/css" media="screen">
	#tbl_color {border:1px solid #707070;font-family:"Trebuchet MS", Verdana, sans-serif;font-size:0.8em}
	#tbl_color td {border:1px solid black}
	.trNormal   {background-color:#FFF}
	.trAlternate { background-color:#66CCFF}
</style>
<script type="text/javascript" src="AlternateColoredRows.js"> </script>

</head>

<body>
<table id="tbl_color" cellpadding="0" cellspacing="2">
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna.</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna.</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna.</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna.</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna.</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna.</td>
	</tr>
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna.</td>
	</tr>
</table>
</body>
</html>

il file AlternateColoredRows.js

codice:

	//===================
	// Parametri da personalizzare
	idTable 			= "tbl_color";   // Tabella che avra' le righe alternate
	cssNormal 			= "trNormal";    // classe css per le righe pari
	cssAlternate		= "trAlternate"; // classe css per le righe dispari
	//===================				
	// Event Listener
	// by Scott Andrew - http://scottandrew.com
	//===================
	function addEvent(elm, evType, fn, useCapture)
	{
    // addEvent and removeEvent
    // cross-browser event handling for IE5+,  NS6 and Mozilla
    // By Scott Andrew
		if (elm.addEventListener)
		{
		  elm.addEventListener(evType, fn, useCapture);
		  return true;
		} 
		else if (elm.attachEvent)
		{
		  var r = elm.attachEvent("on"+evType, fn);
		  return r;
		} 
		else 
		{
		  alert("Handler could not be removed");
		}
  	} 
	function AlternateColorTable()
	{
		if(document.getElementById && document.createElement)
		{
			//alert(document.getElementById(idTable));
			var allTr = document.getElementById(idTable).getElementsByTagName('TR');
			for (var i=0;i<allTr.length;i++) 
				{
				  var currentTR = allTr[i];
				  {
				   if (i%2==0) 	currentTR.setAttribute("class", cssNormal);
				   else 	    currentTR.setAttribute("class", cssAlternate);
				  }
				}
		}
	}

	addEvent(window, "load", AlternateColorTable);

**Xinod** · 10-02-2006, 16:36

dovrebbe funzionare anche richiamando una function generica

codice:

addEvent(window, "load", function(){AlternateColorTable("tbl_color","trNormal","trAlternate");});

**kluster** · 10-02-2006, 17:15

Perfetto, almeno si puo' richiamare la funzione su + tabelle,

Grazie xinod

Discussione: Aggiungere funzione all'onload non carica elementi se hell'head

Strumenti discussione

Ricerca discussione

Visualizza

Aggiungere funzione all'onload non carica elementi se hell'head

Permessi di invio