[HTML] Sélectionner une ligne dans un tableau en html

Bonjour,

J'aimerais pouvoir sélectionner une ligne dans un tableau et de plus si j'en sélectionne une autre que l'ancienne sélectionnée se "désélectionne"

Si quelqu'un pouvait m'aider je lui en serais très reconnaissant

Merci d'avance

Geoffrey

je vois pas trop ce que tu veux dire par "sélectionner"

En fait je souhaite, lorque je clique sur une ligne de tableau que celle ci se grise par exemple ce qui veut dire qu'elle est sélectionner.

De cette façon, lorsque je clique sur un bouton valider, je prenne les infos de la ligne.

http://www.developpez.net/forums/vie...842&highlight=

multipost ??

voici donc un exemple avec un script javascript :
j'ai amélioré mon code depuis la dernière fois.... (condition if (resultat) de la fonction ConfirmChoix() )

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.defaut{
border-style: solid;
border-color: #AAAAAA;
border-width: 2px;
}
 
.selection{
border-style: solid;
border-color: #AAAAAA;
border-width: 2px;
background-color: #8888DD;
}
 
td{
cursor: pointer;
}
 
#idDiv{
padding: 2px;
border-width: 2px;
border-style: inset;
border-color: #AAAAAA;
}
//-->
</style>
 
<script type="text/javascript">
<!--
ObjSelec = null;
function SelectLigne(obj)
{
 var idLigne=obj.id;
 obj.className="selection";
 
 if (ObjSelec!=null)
 {
    ObjSelec.className = "defaut";
    ObjSelec = obj;
 }
 else
 {
    ObjSelec = obj;
 }
}
 
function ConfirmChoix()
{
 var msg = "Vous avez choisi : ";
 var objId, elmt, resultat, i, n;
 var Tab=new Array();
 
 if (ObjSelec != null)
 {
    objId = ObjSelec.id;
    switch(objId)
    {
    case "ligne1":
         msg = msg + "ligne 1";
         break;
    case "ligne2":
         msg = msg + "ligne 2";
         break;
    case "ligne3":
         msg = msg + "ligne 3";
         break;
    }
 
    resultat = window.confirm(msg + "\n Vous confirmez ?");
 
    if (resultat)
    {
      elmt = document.getElementById(objId);
      n=0;
      for(i=0;i<elmt.childNodes.length;i++)
      {
         if (elmt.childNodes[i].nodeName=="TD" || elmt.childNodes[i].nodeName=="td")
         {
             Tab[n] = elmt.childNodes[i].innerHTML;
             n++;
         }
      }
      elmt = document.getElementById("idDiv");
      elmt.innerHTML = "Votre s&eacute;lection&nbsp;: "+ Tab;
    }
 }
 else
 {
    alert("Vous n'avez rien sélectionné !!");
 }
}
 
//-->
</script>
 
</head>
 
<body>
<table class="defaut">
  <tr class="defaut" id="ligne1" onclick="SelectLigne(this)">
    <td class="defaut">Ligne 1 case 0</td>
    <td class="defaut">Ligne 1 case 1</td>
    <td class="defaut">Ligne 1 case 2</td>
    <td class="defaut">Ligne 1 case 3</td>
    <td class="defaut">Ligne 1 case 4</td>
  </tr>
  <tr class="defaut" id="ligne2" onclick="SelectLigne(this)">
    <td class="defaut">Ligne 2 case 0</td>
    <td class="defaut">Ligne 2 case 1</td>
    <td class="defaut">Ligne 2 case 2</td>
    <td colspan="2" class="defaut">Ligne 2 case 3</td>
  </tr>
  <tr class="defaut" id="ligne3" onclick="SelectLigne(this)">
    <td class="defaut">Ligne 3 case 0</td>
    <td class="defaut">Ligne 3 case 1</td>
    <td class="defaut">Ligne 3 case 2</td>
    <td class="defaut">Ligne 3 case 3</td>
    <td class="defaut">Ligne 3 case 4</td>
  </tr>
</table>
<input type="button" value="Valider" id="BNom" onclick="ConfirmChoix()">
<br><br><br>
 
<div id="idDiv" style="">
&nbsp;
</div>
 
</body>
 
</html>

Fonctionne sous IE et FF, pas testé ailleurs

Merci beaucoupe pour ta réponse !!!

Je n'avais pas vu ta précedente réponse, je pensais qu'on avait surpprimé mon post.

:wink:

il y beaucoup de questions sur les forums et parfois elles se retrouvent en fin de liste ou sur une autre page. Pour retrouver tes questions clique sur "voir ses messages" situé en haut à droite de la page d'accueil des forums.

Merci pour l'info

Ton code est vraiment très bien, tu as même poussé assez loin le code avec pleins de fonctionnalités.

Citation:

Envoyé par jehlg

Merci pour l'info

Ton code est vraiment très bien, tu as même poussé assez loin le code avec pleins de fonctionnalités.

on voit le travail de l'artiste :lun: :D

et plus sérieusement je préfère cette version à la première que je t'avais envoyé (cf. http://www.developpez.net/forums/vie...842&highlight=)

Chouette merci !!! C'est parfaitement ce que je cherchais !!! Merci encore :king::yaisse2: