Incrémenter lignes d'un tableau

**skea** · 04/01/2005, 10h15

salut,

Comment faire en javascript pour incrémenter une ligne d'un tableau?
Je m'explique, l'utilisateur clique sur un bouton + et cela génère une ligne d'un tableau composé par trois textarea.

Le code est en php avec une classe ClasseForm, ...

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
 
//création du tableau initial
for ($j=0; $j<$nb_tab; $j++) 
{
	//Ajout du champ nom de tableau
	$form->ajoutChampText("Nom du tableau", "nom", "alphanum", true, 3, 15);
 
	//Création du tableau des colonnes 
	for ($i=0; $i<3; $i++) $form->ajoutChampText("", "titre_colonne_$i", "alphanum", true, 3, 15);	  
 
	//Ajout une ligne de 3 textaera
	for ($i=0; $i<$nb_ligne; $i++) $form->ajoutChampTextarea("", "cellule_$i", "", false);  
 
	//Données retournées par le formulaire
	$resultat = $form->afficher();
	//if ($resultat) echo implode(", ", $resultat); 
 
	//Creation du fichier corps
	......
 
	//Ecriture du code html dans le fichier tableau.xsl 
	......
}

Merci

**SpaceFrog** · 04/01/2005, 10h22

plusieurs solutions :

1/ concaténer le code du tableau puis l'afficher avec un innerHTML...

2/ sinon createElement et appendChild....

3/ ou encore il doit y avoir un truc du style insertRow ...

**skea** · 04/01/2005, 10h28

A ce sujet, j'ai trouvé un truc de ce genre (ta 3ème proposition) :

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
<html>
<head>
<script>
function addRowToTable()
{
	var tbl = document.getElementById('tblSample');
	var lastRow = tbl.rows.length;
	// if there's no header row in the table, then iteration = lastRow + 1
	var iteration = lastRow;	
	var row = tbl.insertRow(lastRow);
 
	// left cell
	var cellLeft = row.insertCell(0);
	var textNode = document.createTextNode(iteration);
	cellLeft.appendChild(textNode);
 
	// right cell
	var cellRight = row.insertCell(1);
	var el = document.createElement('input');
	el.setAttribute('type', 'text');
	el.setAttribute('name', 'txtRow' + iteration);
	el.setAttribute('size', '40');
	cellRight.appendChild(el);
}
function removeRowFromTable()
{
	var tbl = document.getElementById('tblSample');
	var lastRow = tbl.rows.length;
	if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
	// open a blank window
	var aWindow = window.open("", "TableAddRowNewWindow",
	 'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
 
	// set the target to the blank window
	frm.target = "TableAddRowNewWindow";
 
	// submit
	frm.submit();
}
</script>
</head>
<body>
<form action="table.html" method="get">
 
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
<table border="1" id="tblSample">
	<tr>
		<th colspan="2">Sample table</th>
	</tr>
	<tr>
		<td>1</td>
		<td><input type="text" name="txtRow1" size="40" /></td>
	</tr>
</table>
 
</form>
</body>
</html>

le pb c'est qu'on récupère pas les données en cliquant sur submit