Ajout de ligne dans un tableau html

**jmtrivia** · 13/04/2009, 10h32

Bonjour à toutes et tous,

Voici d'abord le code qui ne fonctionne pas ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function AddRow(N)
for (var i=1;i=N;i=i++){
var newRow = document.getElementById('table').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = '<input name="ordrecr"'+i+' type="text" size="3" maxlength="3" />';
    newCell = newRow.insertCell(1);
    newCell.innerHTML = '<input name="libellecr"'+i+' type="text" size="35" maxlength="45" />';
	 newCell = newRow.insertCell(2);
    newCell.innerHTML = '<input name="mtcr"'+i+' type="text" size="6" maxlength="9" />&euro;';
}
</script>

Vous l'aurez compris, je voudrais que mes champs de texte prennent la valeur ordrecr1 / libelle1 / mtcr1 ... ordrecrN / libelleN / mtcrN pour pouvoir les récupérer et les insérer dans ma base.
En ajoutant la boucle, l'insertion de ligne ne fonctionne plus et rien n'est renvoyé.
Qu'en pensez vous ?

Par ailleurs, je me pose la question de savoir comment je vais récupérer les différents champs dans la page d'insertion en PHP ou en JS ? Si quelqu'un a déjà fait je serais heureux qu'il partage son expérience.

Merci de votre aide

**kabkab** · 13/04/2009, 15h58

Bonjour,
A voir ton code, je pense que

Code :

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

for (var i=1;i<=N;i++)

serait plus approprié. Non?

**jmtrivia** · 14/04/2009, 09h48

Bonjour,

Suite à votre "post" d'hier, j'ai modifié la condition.
Néanmoins, le on click ne fonctionne plus.

Merci de votre aide

**jmtrivia** · 15/04/2009, 12h02

Bonjour,

Le code qui devrait me permettre d'ajouter une ligne à un tableau en donnant un nom différent à tous les "input".
(ordrecr1/libellecr1/mtcr1 à ordrecrN/libellecrN/mtcrN)

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
<script type="text/javascript">
function AddRow(N)
{
	for (var i=1;i<=N;i++)
	{
	var newRow = document.getElementById('table').insertRow(-1);
		 var newCell = newRow.insertCell(0);
		 newCell.innerHTML = '<input name="ordrecr"'+i+' type="text" size="3" maxlength="3" />';
		 newCell = newRow.insertCell(1);
		 newCell.innerHTML = '<input name="libellecr"'+i+' type="text" size="35" maxlength="45" />';
		 newCell = newRow.insertCell(2);
		 newCell.innerHTML = '<input name="mtcr"'+i+' type="text" size="6" maxlength="9" />&euro;';
	 }
}
 
</script>

1/ ce code ne fonctionne pas depuis que j'ai ajouté la boucle ... et la concaténation '+i+'
2/ Firebug signale une erreur de syntaxe

Bref, débutant en javascript (j'ai commencé le tuto de JoSé il y a deux jours), j'aimerais un peu d'aide car je suis bloqué.
D'avance, merci.

**Matthieu2000** · 15/04/2009, 12h20

-> mets les " après l'indice ex, enlève le var

newCell.innerHTML = '<input name="mtcr'+i+'" type="text" size="6" maxlength="9" />€';

**andry.aime** · 15/04/2009, 12h53

Code :

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

1
2
3
4
5
6
7
8
9
if (document.all){  
var monInput = document.createElement("<input name='ordrecr"+i+"'>");
}
else{ 
var monInput = document.createElement("input");
monInput.name = "ordrecr"+i;
}
monInput.size='45px';
newCell.appendChild(monInput);

**jmtrivia** · 16/04/2009, 11h11

Je vous propose le nouveau code si il peut être utile à quelqu'un.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript">
function AddRow()
{
	for (i=1;i<=1;i++)
	{
		 var newRow = document.getElementById('table').insertRow(-1);
		 var newCell = newRow.insertCell(0);
			 if (document.all){  
				var monInput = document.createElement("<input name='ordrecr"+i+"'>");
				}
				else{ 
				var monInput = document.createElement("input");
				monInput.name = "ordrecr"+i;
				}
				monInput.size='3';
				newCell.appendChild(monInput);
/* ---------------------------------------------------------------------------------------------------------------------*/		
			  var newCell = newRow.insertCell(1);
				if (document.all){  
				var monInput = document.createElement("<input name='libellecr"+i+"'>");
				}
				else{ 
				var monInput = document.createElement("input");
				monInput.name = "libellecr"+i;
				}
				monInput.size='35';
				newCell.appendChild(monInput);
/* ---------------------------------------------------------------------------------------------------------------------*/		
		 	 var newCell = newRow.insertCell(2);
				if (document.all){  
				var monInput = document.createElement("<input name='mtcr"+i+"'>");
				}
				else{ 
				var monInput = document.createElement("input");
				monInput.name = "mtcr"+i;
				}
				monInput.size='6';
				newCell.appendChild(monInput);	
	 }
}
</script>
</head>
 
<body>
<table id="table">
   <tr>
      <td colspan="4">707 - Ventes de marchandises </td>
   </tr>
   <tr>
      <td><input name="ordrecr" type="text" id="ordrecr" value="1" size="3" /></td>
      <td width="60%"><input name="libellecr" type="text" id="libellecr" size="35" maxlength="45" /></td>
      <td><input name="mtcr" type="text" id="mtcr" size="6" maxlength="9" /> &euro;</td> 
      <td><input name="button" type="button" class="bouton" onclick="AddRow(1);" value="+" /></td>
   </tr>
</table>
</body>
</html>

Bon, un petit regret, si je précise monInput.maxlenght='45'; ... plantage.

Maintenant il faut récupérer et insérer les champs avec PHP. Je m'y mets !

Bonne journée

**RomainVALERI** · 16/04/2009, 12h40

Envoyé par jmtrivia

Bon, un petit regret, si je précise monInput.maxlenght='45'; ... plantage.

maxlength

**jmtrivia** · 16/04/2009, 14h26

Elle est juste dans le script.
Bon, c'est pas le plus important pour le moment ...

Il faut que je trouve un moyen de récupérer mes données proprement !

Ajout de ligne dans un tableau html

JavaScript

Discussions similaires

Partager

Partager