msmformation
Site Admin
Inscrit le: 22 Mar 2007
Messages: 89
Localisation: Paris
|
 Posté le: 18/04/2007 01:19 Sujet du message: Mettre en surbrillance des lignes d'un tableau |
 |
|
Je me suis fabriqué, pour les besoins de notre site http://www.msmstudio.com, un script permettant de mettre en surbrillance les lignes de quelques tableaux d'une page et non tous les tableaux. 
A insérer entre les balises <head> et </head>
| Code: |
<script>
function lum_ligne(id){
var ligne = document.getElementById(id).getElementsByTagName('tr');
for (var i=0;i<ligne.length;i++){
ligne[i].onmouseover = function(){couleur_origine=this.style.backgroundColor;this.style.backgroundColor='#D8E5F2';}
ligne[i].onmouseout = function(){this.style.backgroundColor=couleur_origine;}
}
}
</script>
|
Attention : à mettre en dessous des tableaux aux quels nous voulons appliquer l'effet.
| Code: |
<script>
lum_ligne('resultat');
lum_ligne('dynamique');
</script>
|
Et voilà...quoique...
Si vous avez 20 tableaux nommés tab1, tab2...ne tapez pas le code ci dessus  mais plutôt celui ci dessous  :
| Code: |
<script>
//Pour 20 tableaux, il faut mettre a<21. Il faut ajouter 1 au nombre de tableau
//Si vous avez 3 tableaux nommés tab1, tab2 et tab3, il faut mettre a<4.
for(var a = 1; a < 21; a++){
lum_ligne('tab'+a);
}
</script>
|
Copier coller ce qui suit dans une page vierge et vous comprendrez tout.
| Code: |
<html>
<head>
<title>TR LIGHT</title>
<script>
function lum_ligne(id){
var ligne = document.getElementById(id).getElementsByTagName('tr');
for (var i=0;i<ligne.length;i++){
ligne[i].onmouseover = function(){couleur_origine=this.style.backgroundColor;this.style.backgroundColor='#D8E5F2';}
ligne[i].onmouseout = function(){this.style.backgroundColor=couleur_origine;}
}
}
</script>
</head>
<body>
<table id="resultat" width="600" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td>Résultat</td>
</tr>
<tr bgcolor="#999999">
<td> </td>
</tr>
<tr bgcolor="#666666">
<td> </td>
</tr>
</table>
<p> </p>
<table id="autre" width="600" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td>Autre</td>
</tr>
<tr bgcolor="#999999">
<td> </td>
</tr>
<tr bgcolor="#666666">
<td> </td>
</tr>
</table>
<p> </p>
<table id="dynamique" width="600" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td>Dynamique</td>
</tr>
<tr bgcolor="#999999">
<td> </td>
</tr>
<tr bgcolor="#666666">
<td> </td>
</tr>
</table>
<script>
lum_ligne('resultat');
lum_ligne('dynamique');
</script>
</body>
</html>
|
Pour les tableaux qui se suivent, copier coller ça :
| Code: |
<html>
<head>
<title>TR LIGHT</title>
<script>
function lum_ligne(id){
var ligne = document.getElementById(id).getElementsByTagName('tr');
for (var i=0;i<ligne.length;i++){
ligne[i].onmouseover = function(){couleur_origine=this.style.backgroundColor;this.style.backgroundColor='#D8E5F2';}
ligne[i].onmouseout = function(){this.style.backgroundColor=couleur_origine;}
}
}
</script>
</head>
<body>
<table id="tab1" width="600" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td>Tableau1</td>
</tr>
<tr bgcolor="#999999">
<td> </td>
</tr>
<tr bgcolor="#666666">
<td> </td>
</tr>
</table>
<p> </p>
<table id="tab2" width="600" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td>Tableau2</td>
</tr>
<tr bgcolor="#999999">
<td> </td>
</tr>
<tr bgcolor="#666666">
<td> </td>
</tr>
</table>
<p> </p>
<table id="tab3" width="600" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td>Tableau3</td>
</tr>
<tr bgcolor="#999999">
<td> </td>
</tr>
<tr bgcolor="#666666">
<td> </td>
</tr>
</table>
<script>
for(var a = 1; a < 4; a++){
lum_ligne('tab'+a);
}
</script>
</body>
</html>
|
Des commentaires???
Siva |
|
