Studio Informatico

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; }