11548 sujets

JavaScript, DOM et API Web HTML5

Changer le style d'une ligne de tableau via une fonction

Bonjour,

Voici mes styles:


.lignepaire {
color: #000000;
background-color: #f5f5f5;
}

.ligneimpaire {
color: #000000;
background-color: #e5e5e5;
}

.lignesurvol {
color: #000000;
background-color: #d3dce3;
}


Voici mon joli tableau HTML:


<div id="tablecontainer">
<table>
<caption>Titre tableau</caption>
<tr><th>Titre 1</th><th>Titre 2</th><th>Titre 3</th></tr>
<tr class="ligneimpaire"><td>Ligne 1</td><td>Ligne 1</td><td>Ligne 1</td></tr>
<tr class="lignepaire"><td>Ligne 2</td><td>Ligne 2</td><td>Ligne 2</td></tr>
<tr class="ligneimpaire"><td>Ligne 3</td><td>Ligne 3</td><td>Ligne 3</td></tr>
<tr class="lignepaire"><td>Ligne 4</td><td>Ligne 4</td><td>Ligne 4</td></tr>
<tr class="ligneimpaire"><td>Ligne 5</td><td>Ligne 5</td><td>Ligne 5</td></tr>
<tr class="lignepaire"><td>Ligne 6</td><td>Ligne 6</td><td>Ligne 6</td></tr>
<tr class="ligneimpaire"><td>Ligne 7</td><td>Ligne 7</td><td>Ligne 7</td></tr>
</table>
</div>


Je voudrais via une fonction javascript affecter la classe "lignesurvol" sur une ligne du tableau lorsqu'elle est survolée par la souris et lui redonner sa classe initiale ("lignepaire" ou "ligneimpaire") lorsque le pointeur la quitte.

Merci d'avance pour votre aide.

A+
Bonjour,
Ceci est du live coding, par conséquent je n'ai pas testé, mais ça devrait ressembler à quelque chose comme :


var table = document.getElementById('tablecontainer').getElementsByTagName('table')[0];
var rows = table.tBodies[0].rows;

for (var i=0; i < rows.length; i++) {
var row = rows[i ];
row.onmouseover = function () {
this.oldClassName = this.className;
this.className = 'lignesurvol';
}
row.onmouseout = function () {
if (this.oldClassName) this.className = this.oldClassName;
}

}

Modifié par QuentinC (30 Sep 2006 - 07:50)
Sujet clos
Aller à