[DOM] Script de sélection de row dans une table
Je suis non seulement nouveau dans ce forum, mais aussi un vrai débutant qui je l'avoue ne comprends pas grand chose en Javascript.
J'ai trouvé sur la toile un petit script qui me permet de sélectionner les rows d'une table:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <SCRIPT LANGUAGE="JavaScript">
<!--
function toggleCells(el){
var tr=document.getElementsByTagName('tr');
for (i = 0; i < tr.length; i++)
<!--Si on reclique dessus
if (tr[i].style.backgroundColor=='white')
<!-- Si on clique sur un autre il devient
tr[i].style.backgroundColor='blue'
<!--Si on clique dessus
el.style.backgroundColor='white'
}
// -->
</script> |
Je souhaiterai que quand on reclique sur une rangée déjà sélectionnée précédemment (et donc de couleur bleue) le background change en transparent et qu'il reste transparent quand on clique sur une autre rangée.
Je ne sais pas si je suis très clair, mais en gros j'essaye de mimer la sélection d'une rangée en Mysql.
Merci d'avance pour votre aide
je vais essayer quand même...
J'avais déjà fait quelque chose de similaire pour tester le fonctionnement.
Voilà, en explications ce que j'avais fait.
Tout d'abord, quand tu cliques sur un ligne. En fait tu cliques sur une cellule. Donc toutes tes cellules doivent avoir l'événement onclic du style onclic="changerCouleurLigne()"
Ensuite tout ce passe en script
Dans la fonction changerCouleurLigne(), Il faut :
0: récupérer la couleur de fond de ta cellule (comme ça tu connais l'état de ta ligne sélectionnée ou non)
1 : récupérer la ligne à laquelle appartient la cellule cliquée
2 : a partir de la ligne récupérée, récupérer le tableau
4 : parcourir tout le tableau ligne par ligne Pour chaque ligne, parcourir toutes les cellules. (deux boucles for ou do while imbriquées)
5 : dans la boucle interne (celle qui parcours toutes les cellules) changer la couleur de fond avec ta couleur de fond de base. (transparent)
normalement à ce stade toutes tes lignes (cellules) seront de la même couleurs. (transparent) rien de sélectionné.
Ensuite, il faut faire un seconde boucle qui parcours toutes les cellules de la ligne récupérer en 2:
dans cette boucle:
Si la couleur récupérer en 0: est différente de transparent (c'est quel était sélectionner) alors changer la couleur de fond de la cellule courante avec la couleur de sélection.
bon courage par ce que ce n'est pas trop algorithmique ce que j'ai tenté d'expliquer
plus simple et plus pratique
ça me titillai du coups pendant la mi-temps.
En utilisant le className. Ce qui permet de faciliter la mise en forme des ligne sélectionnées ou déselectionnées.
Ce qui donne :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| <html>
<head>
<style type="text/css" media="screen">
table {
background-color: #EEEEEE;
}
table tr.ligneDeselectionnee {
background-color: transparent;
}
table tr.ligneSelectionnee {
background-color: #DDDDFF;
}
table tr th, table tr.ligne td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
function selectionnerLigne(ligne) {
if (ligne.className=='ligneDeselectionnee') {
ligne.className = 'ligneSelectionnee'
} else {
ligne.className = 'ligneDeselectionnee'
}
}
</script>
</head>
<body>
<table>
<tr>
<th>colonne 1</th>
<th>colonne 2</th>
<th>colonne 3</th>
<th>colonne 4</th>
</tr>
<tr class="ligneDeselectionnee" onclick="selectionnerLigne(this)">
<td>cellule 1.1</td>
<td>cellule 1.2</td>
<td>cellule 1.3</td>
<td>cellule 1.4</td>
</tr>
<tr class="ligneDeselectionnee" onclick="selectionnerLigne(this)">
<td>cellule 2.1</td>
<td>cellule 2.2</td>
<td>cellule 2.3</td>
<td>cellule 2.3</td>
</tr>
<tr class="ligneDeselectionnee" onclick="selectionnerLigne(this)">
<td>cellule 3.1</td>
<td>cellule 3.2</td>
<td>cellule 3.3</td>
<td>cellule 3.4</td>
</tr>
</table>
</body>
</html> |
Citation:
mais diantre que c'est compliqué Javascript
S'il n'y avait que le javascript cela serait du gâteau. Le problème c'est plus javascript contre JScript.