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

**jehlg** · 14/02/2006, 00h42

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

**Kerod** · 14/02/2006, 02h00

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

**jehlg** · 14/02/2006, 11h37

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.

**Auteur** · 14/02/2006, 11h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**jehlg** · 14/02/2006, 14h14

Merci beaucoupe pour ta réponse !!!

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

**Auteur** · 15/02/2006, 05h50

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.