Javascript implémente simplement la couleur et la mise en surbrillance de l'affichage des intervalles de lignes du tableau

Copiez le code comme suit :

<script type="text/javascript">

var name; //Stocke le nom de classe de l'objet tr et le restaure lorsque la souris est éloignée

function trcolor(){ //Affichage de l'intervalle de couleur des lignes du tableau

var tabNode = document.getElementsByTagName("table")[0];

var trNodes = tabNode.rows;

pour(var x=1;x<trNodes.length;x++){

si(x%2 == 1)

trNodes[x].className = "un" ;

autre

trNodes[x].className = "deux";

trNodes[x].onmouseover = function(){ //Mise en surbrillance

nom = this.className;

this.className = "plus" ;

}

trNodes[x].onmouseout = function(){ //Ajouter l'attribut d'événement onmouseout à l'objet tr

this.className = nom ;

}

}

}

window.onload = trcolor;

</script>

<style type="text/css">

tableau{largeur :60 % ; bordure :solide 1px #0066FF;}

tableau td {border:solid 1px #0099ff;}

une{ décoration de texte : aucun ;}

.one{couleur de fond : rouge ;}

.two{couleur de fond : bleu ;}

.over{couleur de fond : jaune ;}

</style>

</tête>

<corps>

<tableau>

<tr>

<td>Nom</td><td>Âge</td><td>Adresse</td>

</tr>

<tr>

<td>Zhang San</td><td>23</td><td>Pékin</td>

</tr>

<tr>

<td>李思</td><td>25</td><td>Shanghai</td>

</tr>

<tr>

<td>王五</td><td>15</td><td>Guangzhou</td>

</tr>

<tr>

<td>M. Tang</td><td>20</td><td>Changsha</td>

</tr>

</table>

</corps>