Script di colorazione alternata automatica delle righe delle tabelle in HTML

Javascript per realizzare in automatico la classica colorazione alternata delle righe in una tabella HTML. Lo script realizza anche l’evidenziazione della riga al passaggio del mouse.

Script principale

function striper(parentElementTag, parentElementClass, childElementTag, styleClasses, hoverClasses) {
var i=0,currentParent,currentChild;
if ((!document.getElementsByTagName) || (!parentElementTag) || (!childElementTag) || (!styleClasses)) return false;
var styles = styleClasses.split(‘,’);
var stylesHover = styles;
if (hoverClasses) stylesHover = hoverClasses.split(‘,’);
var parentItems = document.getElementsByTagName(parentElementTag);
while (currentParent = parentItems[i++]) {
if ((parentElementClass == null)||(new RegExp(‘\b’+parentElementClass+’\b’).test(currentParent.className))) {
var j=0,k=0;
var childItems = currentParent.getElementsByTagName(childElementTag);
while (currentChild = childItems[j++]) {
k = (j+(styles.length-1)) % styles.length;
currentChild.className = currentChild.className+” “+styles[k];
if (hoverClasses) {
currentChild.onmouseover = new Function(“this.className+=’ “+stylesHover[k]+”‘;”);
currentChild.onmouseout = new Function(“this.className=this.className.replace(‘ “+stylesHover[k] + “‘,”);”);
}
}
}
}
}

Script da inserire nella pagina in cui si vuole colorare la tabella

<script type=”text/javascript”>
//<!–
function initStripers() {
striper(‘table’, ‘
nometabella’, ‘tr’, ‘pari,dispari’, ‘pariHover,dispariHover’);
}
window.onload = initStripers;
// –>
</script>

TABELLA HTML

<table class=”nometabella”>
<tr >
<td >Nome</td>
<td >Descrizione</td>
<td >Scarica</td>
</tr>
</table>

Codice CSS

.pari { padding-left: 10px; background-color: #F4F3EA ; color:#000000; text-align: left; border-bottom: 1px solid #9999CC; }
.dispari { padding-left: 10px; background-color: #FFFFFF; color:#000000; text-align: left; border-bottom: 1px solid #9999CC; }

.pariHover { background: #FDDA99; }
.dispariHover { background: #FDDA99; }

Pubblicato da Simone Zanella

Ing. Informatico (sempre), Prof. di Mate-Informatica-Elettronica (quando capita), sciatore (in inverno), Sampdoriano (quanto basta).

Questo sito utilizza cookie tecnici per il suo funzionamento. Cliccando su Accetta, scorrendo la pagina, navigando questo sito ne acconsenti l'uso e la tua scelta sarà memorizzata per 12 mesi. I contenuti presenti rappresentano l'opinione personale dell'autore, le guide e gli appunti sono da considerarsi indicativi e si declina ogni responsabilità derivante dall'applicazione delle indicazioni contenuti in essi. Maggiori informazioni sulla privacy e sui cookie (informativa estesa)

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi