[DOM] integration d'une liste dans un tableau html en javascript [Fait]

**bb62** · 06/06/2007, 09h15

Bonjour à tous,

J'ai un petit souci je voudrais integerer dans un tableau html, une liste deroulante. Voici mon exemple :

Code :

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

1
2
3
4
5
6
7
 
document.getElementById('tab').rows[indx].cells[2].innerHTML = "<select name='choix_qté'><option value selected=\"SELECTED\">1</option>"
for (var i=2;i<101;i++) {
	"<option value="+i+" >"+i+"</option>"+"\n"
}
 
"</select>";

Le problème avec mon code c'est qu'il m'affiche que la valeur 1 alors que moi j'aimerai avoir les valeurs de 1 à 100. En gros il ne me prend pas le for.

Merci d'avance.

**Auteur** · 06/06/2007, 16h30

bonjour,

Il faut utililser les fonctions du DOM pour créer ou supprimer des éléments dans une page HTML et non innerHTML

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function insertion(indx)
{
  var i, op, txt;
  var cellule = document.getElementById('tab').rows[indx].cells[2];
 
  //création de la balise select
  var elSelect = document.createElement("select");
  //nombre d elements visibles
  elSelect.size = "1";
 
  //ajout de la balise select dans la cellule (les options ne sont pas encore crées)
  cellule.appendChild(elSelect);
 
  for (i=0; i<100; i++)
  {
     txt = "Text"+i;
     //création de l'option
     op = new Option(txt,i, false, false);
     //ajout de l'option au select
     elSelect.options.add(op);
  }
 
}
 
//-->
</script>
 
</head>
 
<body>
 
<table border="1" id="tab">
  <tr>
    <td> 1 </td>
    <td> 2 </td>
    <td> 3 </td>
    <td> 4 </td>
  </tr>
  <tr>
    <td> 5 </td>
    <td> 6 </td>
    <td> 7 </td>
    <td> 8 </td>
  </tr>
 
</table>
<input type="button" value="Bouton" onclick="insertion(1)" />
 
 
 
</body>
 
</html>

cf. ce tutoriel également.

**Shinuza** · 06/06/2007, 16h43

Une petite note : Le dom est plus lent qu'innerHTML, parfois pour les grosses opérations il vaut mieux utiliser ce dernier.

Seulement dans ce cas précis ça ne fonctionnera pas sous IE.

**bb62** · 06/06/2007, 16h38

Merci beaucoup, cela marche très bien.

Bonne après-midi à toi.

Merci encore

**bb62** · 07/06/2007, 11h27

Bonjour,

J'aimerai savoir comment maintenant recuperer la valeur de la liste de la cellule du tableau en javascript?

Merci d'avance.

**Shinuza** · 07/06/2007, 12h20

Il faut utiliser rowIndex et cellIndex, tous deux sont des tableaux.

**bb62** · 07/06/2007, 12h35

Alors j'ai fait ça :

Code :

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

1
2
3
 
document.getElementById('tab').rows[ind].cells[0].innerHTML
// tab = id du tableau

Et cela ne fonctionne pas. En fait je voudrai avoir la valeur selectionner de la liste qui se trouve dans la cellule : document.getElementById('tab').rows[ind].cells[0].

Merci d'avance.

**bb62** · 07/06/2007, 15h10

Je fais un alert comme ceci :

Code :

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

1
2
 
alert (document.getElementById('tab').rows[ind].cells[0].innerText);

et il ne m'affiche pas la valeur selectionner de la liste mais toute les valeurs de la liste. Alors que moi par exemple je selectionne le numero 2, j'aimerai retourner la valeur selectionner dans une variable.

Merci d'avance

**Auteur** · 07/06/2007, 15h32

comme ceci :

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function insertion(indx)
{
  var i, op, txt, valeur;
  var cellule = document.getElementById('tab').rows[indx].cells[2];
 
  //création de la balise select
  var elSelect = document.createElement("select");
  //nombre d elements visibles
  elSelect.size = "1";
 
  //id du select
  elSelect.id = "idSelect";
 
 
  //ajout de la balise select dans la cellule (les options ne sont pas encore crées)
  cellule.appendChild(elSelect);
 
  for (i=0; i<100; i++)
  {
     txt = "Text "+i+" ";
     valeur = "Valeur"+i;
     //création de l'option
     op = new Option(txt,valeur, false, false);
     //ajout de l'option au select
     elSelect.options.add(op);
  }
 
 
  var bt = document.createElement("input");
  bt.type = "button";
  bt.value = "Go !";
  bt.onclick = function(){alert(document.getElementById(elSelect.id).value)};
 
  cellule.appendChild(bt);
 
}
 
//-->
</script>
 
</head>
 
<body>
 
<table border="1" id="tab">
  <tr>
    <td> 1 </td>
    <td> 2 </td>
    <td> 3 </td>
    <td> 4 </td>
  </tr>
  <tr>
    <td> 5 </td>
    <td> 6 </td>
    <td> 7 </td>
    <td> 8 </td>
  </tr>
 
</table>
<input type="button" value="Bouton" onclick="insertion(1)" />
 
 
 
</body>
 
</html>

j'ai rajoutéun bouton "Go !" qui affiche la valeur sélectionée lorsque l'on clique dessus.

**bb62** · 07/06/2007, 15h47

Mais le hic c'est que ça marche pour une seule liste alors que moi j'ai plusieurs fois la meme liste dans mon tableau mais je selectionne par exemple la premiere liste cela m'affiche bien la valeur selectionner alors que si je selectionne dans ma deuxième ou troisième liste cela m'affiche toujours la valeur selectionner de ma première liste.

Merci d'avance.

**Auteur** · 07/06/2007, 15h56

il ne faut pas que tes listes aient le même id :

Code html :

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
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function insertion(indx)
{
  var i, op, txt, valeur;
  var cellule = document.getElementById('tab').rows[indx].cells[2];
 
  //création de la balise select
  var elSelect = document.createElement("select");
  //nombre d elements visibles
  elSelect.size = "1";
 
  //id du select
  elSelect.id = "idSelect"+indx;
 
 
  //ajout de la balise select dans la cellule (les options ne sont pas encore crées)
  cellule.appendChild(elSelect);
 
  for (i=0; i<100; i++)
  {
     txt = "Text "+i+" ";
     valeur = "Valeur"+i;
     //création de l'option
     op = new Option(txt,valeur, false, false);
     //ajout de l'option au select
     elSelect.options.add(op);
  }
 
 
  var bt = document.createElement("input");
  bt.type = "button";
  bt.value = "Go !";
  bt.onclick = function(){alert(document.getElementById(elSelect.id).value)};
 
  cellule.appendChild(bt);
 
}
 
//-->
</script>
 
</head>
 
<body>
 
<table border="1" id="tab">
  <tr>
    <td> 1 </td>
    <td> 2 </td>
    <td> 3 </td>
    <td> 4 </td>
  </tr>
  <tr>
    <td> 5 </td>
    <td> 6 </td>
    <td> 7 </td>
    <td> 8 </td>
  </tr>
 
</table>
<input type="button" value="Insérer liste 0" onclick="insertion(0)" />
<input type="button" value="Insérer liste 1" onclick="insertion(1)" />

 
 
 
</body>
 
</html>

là j'ai mis un id à tes select qui est fonction de l'index de la ligne (en gras dans le code).

**bb62** · 07/06/2007, 16h37

en fait je vais reprendre à zero :

lors de l'ouverture de ma page, j'ai un tableau de 10 lignes et 6 colonnes avec 10 zones de listes dans la premiere colonnes.

Il faut oublier le code d'avant car ceci est autre chose.

J'aimerai que quand je selectionne une valeur dans la premiere liste un message d'alert m'affiche la valeur selectionner et faire la meme chose pour les autres listes. Mais avec ce code

Code :

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

1
2
 
alert (document.getElementById(document.getElementById('choix_codePrest').id).value);

choix_codePrest : l'id de la liste

il m'affiche toujours la valeur selectionner de la premiere liste.

voici la declaration de mes liste :

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
 
<table width=800 border=1 id=\"tab\"  name=\"tab\">
<TR>
       <TH width=40>Code</TH>  <TH width=320>Libellé</TH>  <TH width=80>Quantité</TH> <TH width=85>PU</TH> <TH width=85>HT</TH> <TH width=70>TVA</TH> <TH width=85>TTC</TH>
</TR>";
     for ($j=1;$j<11;$j++){
	echo"<TR name=ligne id=$j >";
	$query = "SELECT * from prestation order by code_prestation_caisse";
 
	$resultat=mysql_query($query);
 
             if(!isset($_POST['choix_codePrest'])){
	     $_POST['choix_codePrest']="";
	}else{
	     $_SESSION['choix_codePrest']=$_POST['choix_codePrest'];
	}
 
	echo "<td align=\"center\"><select name=\"choix_codePrest\" id=\"choix_codePrest\" onchange=\"blablablabla(this,$j);\"><option value selected=\"SELECTED\"></option>";
	//On affiche tous les résultats dans la liste déroulante tant qu'il en existe
    	while($res=mysql_fetch_array($resultat)){
							$code=$res[0];
							$libelle=$res[2];
 
   	if (($code)==($_SESSION['choix_codePrest_list'])){
	echo "<option value=".$_SESSION['choix_codePrest_list']." >".$code;
	}else{						echo "<option value=".$code.">".$code;
	}
							echo "</option>"."\n";
	}
 
						echo "</select></td>
 
	<TD  id=libelle name=libelle width=\"320\" >&nbsp; </TD>
	<TD id=qté align=\"center\"><input type=\"qt\" name= \"qt\" style=\"width:50px;text-align:center\" align=\"center\" value= \"1\"/>  </TD>
	<TD id=prixUnit name=prixUnit align=\"center\">&nbsp; </TD>
	<TD id=prixHT name=prixHT align=\"center\" >bbbb </TD>
	<TD id=totalTVA name=totalTVA align=\"center\">&nbsp; </TD>
	<TD id=totalTTC name=totalTTC align=\"center\">&nbsp; </TD>
	<TD id=$j align=\"center\"><IMG src=\"./images/croix.gif\" onclick=\"valeur($j);\" ></TD>
	</TR>";
}
echo "
	<TR>
	<TH colspan=4 name=tot id=tot align=\"right\">TOTAL </TH>
	<TD id=totalTotTVA name=totalTotTVA align=\"center\">&nbsp; </TD>
	<TD id=totalTotTTC name=totalTotTTC align=\"center\">&nbsp; </TD>
	<TD>&nbsp;</TD>
	</TR>
</table>