tableau : ajout d'un <tr> dynamique contenant un input type="text"

**Dendrite** · 16/11/2008, 10h31

Bonjour !

Voici un formulaire sur une page PHP que je propose aux employés, pour qu'ils récapitulent leurs années de service :

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
<table id="services" cellspacing="0" border="1">
	<form name="services" method="POST" action="services.php">
  <tbody>
    <tr>
      <th>Année</th><th>Service</th><th>Bureau</th><th>Fonction</th>
    </tr>
	<tr>
      <td><input type="text" name="année" id="1" value=""/></td>
	  <td><input type="text" name="service" id="1" value=""/></td>
	  <td><input type="text" name="bureau" id="1" value=""/></td>
	  <td><input type="text" name="fonction" id="1" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="2" value=""/></td>
	  <td><input type="text" name="service" id="2" value=""/></td>
	  <td><input type="text" name="bureau" id="2" value=""/></td>
	  <td><input type="text" name="fonction" id="2" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="3" value=""/></td>
	  <td><input type="text" name="service" id="3" value=""/></td>
	  <td><input type="text" name="bureau" id="3" value=""/></td>
	  <td><input type="text" name="fonction" id="3" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="4" value=""/></td>
	  <td><input type="text" name="service" id="4" value=""/></td>
	  <td><input type="text" name="bureau" id="4" value=""/></td>
	  <td><input type="text" name="fonction" id="4" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="5" value=""/></td>
	  <td><input type="text" name="service" id="5" value=""/></td>
	  <td><input type="text" name="bureau" id="5" value=""/></td>
	  <td><input type="text" name="fonction" id="5" value=""/></td>
    </tr>
  </tbody>
  </form>
</table>

Par défaut, je propose cinq années.

Je propose un lien (à terme, ce sera un bouton d'ailleurs, si je peux...

)... pour que l'employé ajoute dynamiquement une ligne à ce tableau.

Pour ce, je suis passée par ce forum js, j'ai cliqué 'recherche', puis entré 'tableau ajout ligne dynamique'... Jusque-là, j'ai tout bon pas vrai ?

Je trouve ce joli code, je l'adapte à mon tableau chéri...

Et voici mon problème : Ce script marche parfaitement pour ajouter des cellules, mais je veux ajouter à l'intérieur de chaque cellule un code html différent... J'ai essayé innerHTML à la place de CreateTextNode...

Code :

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

1
2
var td1 = document.createElement("TD")
    td1.appendChild(document.innerHTML('<input type="text" name="année" id="6" value=""/>'))

Ca bloque...

Le but est toujours à terme de pouvoir récupérer les données entrées par l'employé, même sur une ligne qu'il a ajoutée !

Merci d'avance, d'avance merci !

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
<html>
<head><title>ajout dynamique de ligne</title>
<SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin
  function addRow(id){
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild (document.createTextNode("Année"))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("Service"))
	var td3 = document.createElement("TD")
    td3.appendChild (document.createTextNode("Bureau"))
	var td4 = document.createElement("TD")
    td4.appendChild (document.createTextNode("Fonction"))
    row.appendChild(td1);
    row.appendChild(td2);
	row.appendChild(td3);
	row.appendChild(td4);
    tbody.appendChild(row);
  }
//  End -->
</script>
</head>
<body>
<a href="javascript:addRow('services')">Ajouter une ligne au tableau</a>
 
 
	<form name="services" method="POST" action="services.php">
	<table id="services" cellspacing="0" border="1">
  <tbody>
    <tr>
      <th>Année</th><th>Service</th><th>Bureau</th><th>Fonction</th>
    </tr>
	<tr>
      <td><input type="text" name="année" id="1" value=""/></td>
	  <td><input type="text" name="service" id="1" value=""/></td>
	  <td><input type="text" name="bureau" id="1" value=""/></td>
	  <td><input type="text" name="fonction" id="1" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="2" value=""/></td>
	  <td><input type="text" name="service" id="2" value=""/></td>
	  <td><input type="text" name="bureau" id="2" value=""/></td>
	  <td><input type="text" name="fonction" id="2" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="3" value=""/></td>
	  <td><input type="text" name="service" id="3" value=""/></td>
	  <td><input type="text" name="bureau" id="3" value=""/></td>
	  <td><input type="text" name="fonction" id="3" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="4" value=""/></td>
	  <td><input type="text" name="service" id="4" value=""/></td>
	  <td><input type="text" name="bureau" id="4" value=""/></td>
	  <td><input type="text" name="fonction" id="4" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année" id="5" value=""/></td>
	  <td><input type="text" name="service" id="5" value=""/></td>
	  <td><input type="text" name="bureau" id="5" value=""/></td>
	  <td><input type="text" name="fonction" id="5" value=""/></td>
    </tr>
  </tbody>
  </table>
  <input type="submit" name="valider" value="Valider"/>
  </form>
 
 
</body>
</html>

**Jumano** · 16/11/2008, 10h55

Bonjour,
Essaye avec ceci :

Code :

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

1
2
3
4
5
var td1 = document.createElement("TD")
    var td11 = td1.appendChild (document.createElement('input'))
	td11.setAttribute("type", "text")
	td11.setAttribute("name", "année")
	td11.setAttribute("id", "6")

EDIT :
J'ai modifié le code car il y avait une erreur sous FireFox

**Dendrite** · 16/11/2008, 11h43

Merci Jumano, je teste de ce pas...

En réfléchissant et étudiant les histoires de appendChild et création de noeuds (et en démêlant aussi les noeuds dans ma tête)...

Je suis aboutie à ça, qui fonctionne en apparence. (Je n'ai pas encore testé l'essentiel, à savoir, si à l'arrivée en PHP, je récupère un truc valable dans les années ajoutées, et le code doit vous faire pouffer)... Mais bon... Je peux pas m'empêcher d'être toute fiérote...

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
<SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin
  function addRow(id){
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
	var input1=document.createElement("INPUT")
    input1.innerHTML='type="text" name="année" value=""';
 
    var td2 = document.createElement("TD")
	var input2=document.createElement("INPUT")
	input2.innerHTML='type="text" name="service" value=""';
 
	var td3 = document.createElement("TD")
	var input3=document.createElement("INPUT")
	input3.innerHTML='type="text" name="bureau" value=""';
 
	var td4 = document.createElement("TD")
	var input4=document.createElement("INPUT")
	input4.innerHTML='type="text" name="fonction" value=""';
 
	td1.appendChild(input1);
    row.appendChild(td1);
	td2.appendChild(input2);
    row.appendChild(td2);
	td3.appendChild(input3);
	row.appendChild(td3);
	td4.appendChild(input4);
	row.appendChild(td4);
 
    tbody.appendChild(row);
  }
 
//  End -->
</script>

**Dendrite** · 16/11/2008, 12h07

Raté !

Mon code ne récupère pas les données entrées dans les lignes supplémentaires (et bien qu'il récupère bien les données entrées dans les lignes de départ)... comme le montre cette dernière mouture.

Je teste ton code.

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
 
<html>
<head><title>ajout dynamique de ligne</title>
<SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin
  function addRow(id){
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
	var input1=document.createElement("INPUT")
    input1.innerHTML='type="text" name="année6" value=""';
 
    var td2 = document.createElement("TD")
	var input2=document.createElement("INPUT")
	input2.innerHTML='type="text" name="service6" value=""';
 
	var td3 = document.createElement("TD")
	var input3=document.createElement("INPUT")
	input3.innerHTML='type="text" name="bureau6" value=""';
 
	var td4 = document.createElement("TD")
	var input4=document.createElement("INPUT")
	input4.innerHTML='type="text" name="fonction6" value=""';
 
	td1.appendChild(input1);
    row.appendChild(td1);
	td2.appendChild(input2);
    row.appendChild(td2);
	td3.appendChild(input3);
	row.appendChild(td3);
	td4.appendChild(input4);
	row.appendChild(td4);
 
    tbody.appendChild(row);
  }
 
//  End -->
</script>
</head>
<body>
<a href="javascript:addRow('services')">Ajouter une ligne au tableau</a>
 
 
	<form name="services" method="POST" action="services.php">
	<table id="services" cellspacing="0" border="1">
  <tbody>
    <tr>
      <th>Année</th><th>Service</th><th>Bureau</th><th>Fonction</th>
    </tr>
	<tr>
      <td><input type="text" name="année1"  value=""/></td>
	  <td><input type="text" name="service1"  value=""/></td>
	  <td><input type="text" name="bureau1"  value=""/></td>
	  <td><input type="text" name="fonction1" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année2"  value=""/></td>
	  <td><input type="text" name="service2"  value=""/></td>
	  <td><input type="text" name="bureau2"  value=""/></td>
	  <td><input type="text" name="fonction2"  value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année3"  value=""/></td>
	  <td><input type="text" name="service3"  value=""/></td>
	  <td><input type="text" name="bureau3"  value=""/></td>
	  <td><input type="text" name="fonction3" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année4"  value=""/></td>
	  <td><input type="text" name="service4"  value=""/></td>
	  <td><input type="text" name="bureau4"  value=""/></td>
	  <td><input type="text" name="fonction4" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année5"  value=""/></td>
	  <td><input type="text" name="service5" value=""/></td>
	  <td><input type="text" name="bureau5"  value=""/></td>
	  <td><input type="text" name="fonction5"  value=""/></td>
    </tr>
  </tbody>
  </table>
  <input type="submit" name="valider" value="Valider"/>
  </form>
 
<?php
if (isset ($_POST['valider'])){
	$flag=0;
	foreach ($_POST as $indice=>$value){
		if ($value!=NULL && $value !='' && $value!='Valider'){
			echo $indice.' : '.$value.'<br>';
			$flag=1;
		}
	}
	if ($flag==0){
		echo'Aucune donnée n\'a été saisie !';
	}
	}
?>
</body>
</html>

**Dendrite** · 16/11/2008, 12h27

Ton code tourne impeccable cher ami !

Toutes mes amitiés et un grand merci !

Détails maintenant : Intégrer une variable année en valeur absolue dans les name : du genre fonction2008 fonction2007 etc...

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
 
<html>
<head><title>ajout dynamique de ligne</title>
<SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin
 
  function addRow(id){
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
 
	var td1 = document.createElement("TD")
    var td11 = td1.appendChild (document.createElement('input'))
	td11.setAttribute("type", "text")
	td11.setAttribute("name", "année6")
 
    var td2 = document.createElement("TD")
	var td21 = td2.appendChild (document.createElement('input'))
	td21.setAttribute("type", "text")
	td21.setAttribute("name", "service6")
 
	var td3 = document.createElement("TD")
	var td31 = td3.appendChild (document.createElement('input'))
	td31.setAttribute("type", "text")
	td31.setAttribute("name", "bureau6")
 
	var td4 = document.createElement("TD")
	var td41 = td4.appendChild (document.createElement('input'))
	td41.setAttribute("type", "text")
	td41.setAttribute("name", "fonction6")
 
	row.appendChild(td1);
    row.appendChild(td2);
	row.appendChild(td3);
	row.appendChild(td4);
    tbody.appendChild(row);
  }
 
//  End -->
</script>
</head>
<body>
<a href="javascript:addRow('services')">Ajouter une ligne au tableau</a>
 
 
	<form name="services" method="POST" action="services.php">
	<table id="services" cellspacing="0" border="1">
  <tbody>
    <tr>
      <th>Année</th><th>Service</th><th>Bureau</th><th>Fonction</th>
    </tr>
	<tr>
      <td><input type="text" name="année1"  value=""/></td>
	  <td><input type="text" name="service1"  value=""/></td>
	  <td><input type="text" name="bureau1"  value=""/></td>
	  <td><input type="text" name="fonction1" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année2"  value=""/></td>
	  <td><input type="text" name="service2"  value=""/></td>
	  <td><input type="text" name="bureau2"  value=""/></td>
	  <td><input type="text" name="fonction2"  value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année3"  value=""/></td>
	  <td><input type="text" name="service3"  value=""/></td>
	  <td><input type="text" name="bureau3"  value=""/></td>
	  <td><input type="text" name="fonction3" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année4"  value=""/></td>
	  <td><input type="text" name="service4"  value=""/></td>
	  <td><input type="text" name="bureau4"  value=""/></td>
	  <td><input type="text" name="fonction4" value=""/></td>
    </tr>
	<tr>
      <td><input type="text" name="année5"  value=""/></td>
	  <td><input type="text" name="service5" value=""/></td>
	  <td><input type="text" name="bureau5"  value=""/></td>
	  <td><input type="text" name="fonction5"  value=""/></td>
    </tr>
  </tbody>
  </table>
  <input type="submit" name="valider" value="Valider"/>
  </form>
 
<?php
if (isset ($_POST['valider'])){
		$flag=0;
		foreach ($_POST as $indice=>$value){
			if ($value!=NULL && $value !='' && $value!='Valider'){
				echo $indice.' : '.$value.'<br>';
				$flag=1;
			}
		}
		if ($flag==0){
			echo'Aucune donnée n\'a été saisie !';
		}
	}
?>
</body>
</html>

**Jumano** · 16/11/2008, 12h50

Que veux tu faire exactement ?

tableau : ajout d'un <tr> dynamique contenant un input type="text"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager