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

Script popolamento form selezione comuni – province in Ajax e PHP

Classico problema del form in cui vogliamo popolare una SELECT con i nomi dei Comuni italiani in base alla selezione della Provincia tramite un’altra SELECT. Questo per evitare di dover caricare una SELECT con oltre 8000 campi (tanti sono i Comuni italiani).
Procurarsi un Database contenente le tabelle di province e comuni.
In questo esempio utilizziamo 3 files:

richiesta.php (pagina PHP con lo script)
form.html (pagina web con il form)
select.js (file Javascript)

FORM.HTML

<html>
 <head>
 <title>Ajax-PHP</title>
 <script type="text/javascript" src="lists.js"></script>
 </head>
 <body>
 <form action="form.html" method="post">
 <fieldset>
 <label for="province">Province</label><br />
 <select name="province" id="province" onchange="loadList('citta', getSelected(this))" >
 </select><br />
 <label for="citta">Citta</label><br />
 <select name="citta" id="citta">
 </select><br />
 </fieldset>
 </form>
 <!-- script per precaricare le province  -->
 <script type="text/javascript">
 //<![CDATA[
 loadList('province', 0);
 //]]>
 </script>
 </body>
 </html>

Leggi tutto “Script popolamento form selezione comuni – province in Ajax e PHP”