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 ?

**Dendrite** · 16/11/2008, 13h03

Un truc dans ce goût là ?

Ca tourne bien non ?
Chaque année on change la variable php $an, et la variable js an... et zou le reste se fait tout seul...

(heu là je sais, c'est une question html, mais j'aurais aimé qu'il ne soit pas possible d'avoir le focus sur l'année pour le user, et dans ma boucle de vérification, virer les années...) C'est dingue, on résout un truc, ya un autre truc qui pointe son nez...

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
104
105
106
107
108
109
<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 annee=an-5-compteur;
	var td1 = document.createElement("TD")
    var td11 = td1.appendChild (document.createElement('input'))
	td11.setAttribute("type", "text")
	td11.setAttribute("name", annee)
	td11.setAttribute("value", annee)
	td11.setAttribute("readonly", "readonly")
    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>
<button onClick="javascript:addRow('services'); compteur=compteur+1;">Ajouter une ligne au tableau</button>
 
<SCRIPT LANGUAGE="JavaScript">
var compteur=0;
var an=2008;
</script>
	<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><?php $an=2008; ?>
      <td><input type="text" readonly name="<?php echo $an; ?>"  value="<?php echo $an; ?>"/></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"  readonly name="<?php echo $an-1; ?>"  value="<?php echo $an-1; ?>"/></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"  readonly name="<?php echo $an-2; ?>"  value="<?php echo $an-2; ?>"/></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"  readonly name="<?php echo $an-3; ?>"  value="<?php echo $an-3; ?>"/></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"  readonly name="<?php echo $an-4; ?>"  value="<?php echo $an-4; ?>"/></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>

**Auteur** · 16/11/2008, 13h07

un détail : es-tu sûr que la valeur de name est prise en compte sous IE ?
cf. cette discussion ou celle-ci

**Dendrite** · 16/11/2008, 13h22

Ben, heu, je viens de tester sous ie6 et FF la fabuleuse ascension sociale de Madame Dupont :

Les deux tournent bien...

Evidemment, il faut que je termine ma fonction js pour aller au delà de l'année -6... ya plus qu'à !

IE6
*********************************************
2008 : 2008
service1 : DI
bureau1 : DI25
fonction1 : développeuse web
2007 : 2007
service2 : DE
bureau2 : DE14
fonction2 : réceptionniste
2006 : 2006
service3 : DE
bureau3 : DE14
fonction3 : réceptionniste
2005 : 2005
service4 : DE
bureau4 : DE14
fonction4 : réceptionniste
2004 : 2004
service5 : DE
bureau5 : DE14
fonction5 : réceptionniste
2003 : 2003
service6 : DPO
bureau6 : DPO35
fonction6 : femme de ménage
2002 : 2002
2001 : 2001
2000 : 2000
1999 : 1999

FF
*********************************************
2008 : 2008
service1 : DI
bureau1 : DI25
fonction1 : développeuse web
2007 : 2007
service2 : DE
bureau2 : DE14
fonction2 : réceptionniste
2006 : 2006
service3 : DE
bureau3 : DE14
fonction3 : réceptionniste
2005 : 2005
service4 : DE
bureau4 : DE14
fonction4 : réceptionniste
2004 : 2004
service5 : DE
bureau5 : DE14
fonction5 : réceptionniste
2003 : 2003
service6 : DPO
bureau6 : DPO35
fonction6 : femme de ménage
2002 : 2002

**Dendrite** · 16/11/2008, 13h53

Voilà quelque chose qui tourne rond et qui répond à mon objectif.

On peut retrouver par l'attribut name facilement ce qu'on veut : genre fonction1999 et zou...et ça marche aussi bien sous FF qu'IE6...

Des remarques ? Des critiques ? Des moqueries ?

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
104
105
106
107
108
109
110
111
<html>
<head><title>ajout dynamique de ligne</title>
<SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin
 
  function addRow(id){
 
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
	var annee=an-5-compteur;
    var row = document.createElement("TR")
 
 
	var td1 = document.createElement("TD")
    var td1a = td1.appendChild (document.createElement('input'))
	td1a.setAttribute("type", "text")
	td1a.setAttribute("name", "AN"+annee)
	td1a.setAttribute("value", annee)
	td1a.setAttribute("readonly", "readonly")
 
    var td2 = document.createElement("TD")
	var td2a = td2.appendChild (document.createElement('input'))
	td2a.setAttribute("type", "text")
	td2a.setAttribute("name", "service"+annee)
 
	var td3 = document.createElement("TD")
	var td3a = td3.appendChild (document.createElement('input'))
	td3a.setAttribute("type", "text")
	td3a.setAttribute("name", "bureau"+annee)
 
	var td4 = document.createElement("TD")
	var td4a = td4.appendChild (document.createElement('input'))
	td4a.setAttribute("type", "text")
	td4a.setAttribute("name", "fonction"+annee)
 
	row.appendChild(td1);
    row.appendChild(td2);
	row.appendChild(td3);
	row.appendChild(td4);
 
    tbody.appendChild(row);
  }
 
//  End -->
</script>
</head>
<body>
<button onClick="javascript:addRow('services'); compteur=compteur+1;">Ajouter une ligne au tableau</button>
 
<SCRIPT LANGUAGE="JavaScript">
var compteur=0;
var an=2008;
</script>
	<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><?php $an=2008; ?>
      <td><input type="text" readonly name="AN<?php echo $an; ?>"  value="<?php echo $an; ?>"/></td>
	  <td><input type="text" name="service<?php echo $an; ?>"  value=""/></td>
	  <td><input type="text" name="bureau<?php echo $an; ?>"  value=""/></td>
	  <td><input type="text" name="fonction<?php echo $an; ?>" value=""/></td>
    </tr>
	<tr>
      <td><input type="text"  readonly name="AN<?php echo $an-1; ?>"  value="<?php echo $an-1; ?>"/></td>
	  <td><input type="text" name="service<?php echo $an-1; ?>"  value=""/></td>
	  <td><input type="text" name="bureau<?php echo $an-1; ?>"  value=""/></td>
	  <td><input type="text" name="fonction<?php echo $an-1; ?>"  value=""/></td>
    </tr>
	<tr>
      <td><input type="text"  readonly name="AN<?php echo $an-2; ?>"  value="<?php echo $an-2; ?>"/></td>
	  <td><input type="text" name="service<?php echo $an-2; ?>"  value=""/></td>
	  <td><input type="text" name="bureau<?php echo $an-2; ?>"  value=""/></td>
	  <td><input type="text" name="fonction<?php echo $an-2; ?>" value=""/></td>
    </tr>
	<tr>
      <td><input type="text"  readonly name="AN<?php echo $an-3; ?>"  value="<?php echo $an-3; ?>"/></td>
	  <td><input type="text" name="service<?php echo $an-3; ?>"  value=""/></td>
	  <td><input type="text" name="bureau<?php echo $an-3; ?>"  value=""/></td>
	  <td><input type="text" name="fonction<?php echo $an-3; ?>" value=""/></td>
    </tr>
	<tr>
      <td><input type="text"  readonly name="AN<?php echo $an-4; ?>"  value="<?php echo $an-4; ?>"/></td>
	  <td><input type="text" name="service<?php echo $an-4; ?>" value=""/></td>
	  <td><input type="text" name="bureau<?php echo $an-4; ?>"  value=""/></td>
	  <td><input type="text" name="fonction<?php echo $an-4; ?>"  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>

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

JavaScript

Discussions similaires

Partager

Partager