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

Version imprimable

Bonjour à tous,

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

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.

bonjour,

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

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
 
<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.

06/06/2007, 15h38
bb62

Merci beaucoup, cela marche très bien.

Bonne après-midi à toi.

Merci encore
06/06/2007, 15h43
Shinuza

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.
07/06/2007, 10h27
bb62

Bonjour,

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

Merci d'avance.
07/06/2007, 11h20
Shinuza

Il faut utiliser rowIndex et cellIndex, tous deux sont des tableaux.
07/06/2007, 11h35
bb62
Alors j'ai fait ça :
Code:

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.
07/06/2007, 14h10
bb62
Je fais un alert comme ceci :
Code:

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

comme ceci :

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
 
<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.

07/06/2007, 14h47
bb62

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.

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

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
<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).

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:

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:

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>

Je ne sais pas si j'ai été assez clair

Merci d'avance.

07/06/2007, 16h15
bb62
Bon ben finallement, j'ai reussi à trouver en cherchant bien.

Voici le code :
Code:

1 2 document.getElementById(document.getElementById('choix_codePrest'+ind).id).value;
$j de 1 à a0
comme pour chaque liste l'id = choix_codePrest$j alors ind = $j.

Je vous souhaite à tous une bonne journée.
08/06/2007, 15h56
bb62
Bonjour,

J'aimerai centrer la liste dans la cellule.

J'ai fais ceci :
Code:

1 2 cellule.align="center";
Merci d'avance
08/06/2007, 16h03
bb62

C'est bon j'ai trouvé.

Merci,
A++