selection d'une ligne dans un tableau en html

**jehlg** · 08/02/2006, 11h49

Bonjour,

Je souhaiterais sélectionner une ligne dans un tableau et une fois sélectionnée que je puisse valider. Ainsi je récupère les infos de la ligne pour ouvrir ma page suivante.

Merci d'avance pour votre aide

Cordialement

Geoffrey

**Auteur** · 08/02/2006, 23h08

bonjour,

tu souhaites faire quelque chose dans ce genre là ?

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
<html>
<head>
<title></title>
<style type="text/css">
<!--
.defaut{
border-style: solid;
border-color: #AAAAAA;
border-width: 2px;
}
 
.selected{
border-style: solid;
border-color: #AAAAAA;
border-width: 2px;
background-color: #8888DD;
}
//-->
</style>
 
<script type="text/javascript">
<!--
oldObj = null;
function SelectLigne(obj)
{
 var idLigne=obj.id;
 obj.className="selected";
 
 if (oldObj!=null)
 {
    oldObj.className = "defaut";
    oldObj = obj;
 }
 else
 {
    oldObj = obj;
 }
}
 
function ConfirmChoix()
{
 var msg = "Vous avez choisi : ";
 var objId, i, elmt;
 var contenu = new Array();
 var resultat;
 
 if (oldObj != null)
 {
  objId = oldObj.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)
  {
    /*méthode peut elegante pour recuperer le texte des cellules d'une ligne selectionnee */
   /*à revoir */
    elmt = document.getElementById(objId);
    i = 0;
    while (elmt!=null)
    {
       /*concatenation de l'id de la ligne avec un indice*/
      /*pour former l'id d'une cellule*/
      objId = oldObj.id + i.toString(); 
 
      elmt = document.getElementById(objId);
      if (elmt!=null)
         contenu[i] = elmt.innerHTML;  /*recuperation du texte de la cellule*/
      i++;
    }
    alert(contenu);
  }
 
 }
 else
 {
     alert("Vous n'avez rien sélectionné !!");
 }
}
 
//-->
</script>
 
</head>
 
<body>
<table class="defaut">
  <tr class="defaut" id="ligne1" onclick="SelectLigne(this)">
    <td id="ligne10" class="defaut">Ligne 0 case 0</td>
    <td id="ligne11" class="defaut">Ligne 1 case 1</td>
    <td id="ligne12" class="defaut">Ligne 1 case 2</td>
    <td id="ligne13" class="defaut">Ligne 1 case 3</td>
    <td id="ligne14" class="defaut">Ligne 1 case 4</td>
  </tr>
  <tr class="defaut" id="ligne2" onclick="SelectLigne(this)">
    <td id="ligne20" class="defaut">Ligne 2 case 0</td>
    <td id="ligne21" class="defaut">Ligne 2 case 1</td>
    <td id="ligne22" class="defaut">Ligne 2 case 2</td>
    <td id="ligne23" colspan="2" class="defaut">Ligne 2 case 3</td>
  </tr>
  <tr class="defaut" id="ligne3" onclick="SelectLigne(this)">
    <td id="ligne30" class="defaut">Ligne 2 case 0</td>
    <td id="ligne31" class="defaut">Ligne 2 case 1</td>
    <td id="ligne32" class="defaut">Ligne 2 case 2</td>
    <td id="ligne33" class="defaut">Ligne 2 case 3</td>
    <td id="ligne34" class="defaut">Ligne 2 case 4</td>
  </tr>
</table>
<input type="button" value="Valider" id="BNom" onclick="ConfirmChoix()">
 
 
 
</body>
 
</html>

la boucle while de la fonction ConfirmChoix sert à récupérer les différents contenus des cellules de la ligne surlignée. Cette boucle t'oblige à définir un id pour chaque cellule (cf code HTML pour l'incrément des id).

Je pense qu'en utilisant une expression régulière on peut arriver au même résultat :

Code :

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

1
2
 
contenu = oldObj.split(ExpressionRégulière);

et ce serait plus élégant que ces getElementById qui se courrent après.

Fonctionne sous IE et FireFox, pas testé ailleurs.

selection d'une ligne dans un tableau en html

JavaScript

Discussions similaires

Partager

Partager