Selection de ligne dans un tableau [Résolu]

[kwyzix]

Bonjour,
Je programme en php/javascript (les dernieres versions) mais je pense que mon probleme vient plus du xhtml :
J'ai un tableau (<table>) avec plusieurs lignes (<tr>) et plusieurs cellules(<td>) et du texte dedans (pas de liens ou boutons ou ...). mais voila, j'aimerai pourvoir selectionner une ligne du tableau avec le clavier comme si c'etait un champs input (par la touche TAB). Comment je peux faire pour que ca puisse etre possible ?
J'ai deja trouvé une solution mais elle ne me plait pas trop : je met la 1ere cellule de chaque ligne en lien et du coup la touche TAB me permet de selectionner les cellules avec les liens. Mais je trouve ca pas tres beau. peut etre avec du css on peut arranger ca mais comment dire au css que quand tu te trouve sur une cellule du tableau tu selectionnes la ligne entiere (ou du moins fait croire que la ligne entiere est selectionnée et pas que la cellule).
Merci d'avance pour vos lumieres !

[NoSmoking]

Bonjour,

mais voila, j'aimerai pourvoir selectionner une ligne du tableau avec le clavier comme si c'etait un champs input (par la touche TAB)

tu peux toujours mettre un tabindex=x sur tes cellules mais c'est sans garantie sur tous les navigateurs

Autrement avec une ligne de style du type

Code :

1
2
3
tr:hover{
  background-color: #e0e0e0;
}

mais c'est la souris qui rentre en jeu...

[kwyzix]

Pour le css que tu me propose ca marche qu'avec la souris.
Et pour le TABINDEX, ca va mettre trop difficile car je n'ai pas que le tableau sur ma page et le tabindex prend la priorité sur les autres champs (sans tabindex) donc pas trop faisable pour mon cas. La creation du mon tableau est une fonction php et est utilisée sur plusieurs pages de mon site.
merci quand meme nosmoking.

[NoSmoking]

Et pour le TABINDEX, ca va mettre trop difficile car je n'ai pas que le tableau sur ma page et le tabindex prend la priorité sur les autres champs (sans tabindex) donc pas trop faisable pour mon cas

si tu cliques sur une cellule le focus lui est donné et la touche TAB enchainera à partir de celle ci.

[kwyzix]

Je suis d'accord mais je cherche a rendre mon site utilisable exclusivement au clavier !!

[NoSmoking]

Envoyé par kwyzix

Je suis d'accord mais je cherche a rendre mon site utilisable exclusivement au clavier !!

dans ce cas regardes du coté des ACCESKEY, mais pas sur que cela fonctionne super bien.

L'autre solution est de faire un gestionnaire de clavier propre à ton site.

[kwyzix]

Nosmoking, j'ai deja tout ca, je gere deja le clavier, ... mais ce que je veux c'est acceder aux lignes d'un tableau via le clavier ! c'est a dire rendre selectionnable les lignes d'un tableau.
Bon j'ai trouvé une solution acceptable :
dans la 1ere cellule de chaque ligne je fais un lien, puis dans chacun des lien je fait ca : onfocus="this.parentNode.parentNode.className='selectionner'" onblur="this.parentNode.parentNode.className='unselect'" (2 fois parentNode car la 1ere fois on change le td et la 2eme fois le tr)
enfin, dans mon CSS je fais :

.selectionner{
background-color : lightgreen ;
}

et voila le travail !!
pour faire plus jolie encore, j'ai enlever le changement de police,couleur,... des liens.

exemple de html :

<table class="tableau">
<tbody>
<tr class="unselect">
<td>
<a href='votre lien' onfocus="this.parentNode.parentNode.className='selectionner'" onblur="this.parentNode.parentNode.className='unselect'"> 1</a>
</td>
<td> MR</td>
</tr>


puis de css :

tr{
background-color : blue ;
color : black;
}

.selectionner{
background-color : lightgreen ;
color : red;
}