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