Creation tables apres click sur un bouton

**billyrose** · 19/06/2009, 10h25

Bonjour a tous,

Excusez moi d'avance si je dis une connerie, mais c'est le premier code Javascript que j'ecris.
J'ai une table donc je cree l'entete en html mais voila, je voudrais que quand l'utilisateur clique sur un le bouton Add Functionality, deux nouvelles lignes sont ajoutees a la table

j'ai ecrit le code suivant:

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
<?php
require_once ('../mysqli_connect.php');
?>
<script>
    function start() {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];
 
        // creates a <table> element and a <tbody> element
        //var tbl = document.createElement("table");
 
		var tbl = document.getElementById("table");
        var tblBody = document.createElement("tbody");
 
        // creating all cells
        for (var j = 0; j < 2; j++) {
            // creates a table row
            var row = document.createElement("tr");
 
            for (var i = 0; i < 4; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
				eAnchor = document.createElement("a");
				eAnchor.setAttribute("href","delete.php");
				eAnchor.appendChild(document.createTextNode("[Delete]"));
                cell.appendChild(eAnchor);
                row.appendChild(cell);
            }
 
            // add the row to the end of the table body
            tblBody.appendChild(row);
        }
 
        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }
</script>
 
<form>
<table id="table">
<tr><td colspan="2">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3">
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="submit" value="Add Functionality" onclick='start();'></td></tr>
 
	</table>
</td></tr>
</table> 
</form>

le resultat est en fichier attache (vori resultat.jpg)

Ce resultat ne correspond pas a ce que je veux. Je voudrais que les deux lignes supplementaires qui s'ajoutent en fin de table a chaque fois que l'utilisateur clique sur Add Functionality, soient alignees avec l'entete de la table.

Pouvez vous m'aider a le faire?

Merci

Billy

**le_chomeur** · 19/06/2009, 10h34

La structure de ton tableau n'était pas bonne ( pas le code javascript mais coté html ... )

tu avais un tableau imbriqué ( a déconseiller )

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
 
<form>
	<table id="table" align="center" border = "2" cellspacing ="0" cellpadding="3">
		<tbody>
		<tr>
			<td><b>Functionality Name:</b></td> 
			<td><b>Description:</b></td> 
			<td><b>Status:</b></td> 
			<td><input type="submit" value="Add Functionality" onclick='start();'></td>
		</tr>
		</tbody>
	</table> 
</form>		
		<script>
    function start() {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];
 
		var tbl = document.getElementById("table");
        var tblBody = tbl.getElementsByTagName("tbody")[0];
 
        // creating all cells
        for (var j = 0; j < 2; j++) {
            // creates a table row
            var row = document.createElement("tr");
 
            for (var i = 0; i < 4; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
				eAnchor = document.createElement("a");
				eAnchor.setAttribute("href","delete.php");
				eAnchor.appendChild(document.createTextNode("[Delete]"));
                cell.appendChild(eAnchor);
                row.appendChild(cell);
            }
 
            // add the row to the end of the table body
            tblBody.appendChild(row);
        }
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }
	start();
</script>

**billyrose** · 19/06/2009, 10h47

Merci pour ta reponse.
je teste que le code que tu as modifie et la je n'ai meme pas encore cliquer sur Add Functionality que j'ai deja deux lignes ajoutees a la fin de ma table. Et Ensuite quand je clique sur Add Functionality pour avoir deux nouvelles deux lignes et elle apparaissent et disparaissent tout de suite apres.

Qu' est ce qui s'est passe?

Billy

**vermine** · 19/06/2009, 10h48

A la fin du script on appelle la fonction start(); au load de la page. Enlève l'instruction et le tableau sera vide au départ.

Code :

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

1
2
3
4
5
<script>
    function start() {/*la définition de la fonction... */   }
    start();
</script>

**le_chomeur** · 19/06/2009, 11h02

Effectivement comme souligné par vermine, pour le test j'appelle la méthode dès le load de la page d'ou le fait que les 2 lignes soit ajoutées

**billyrose** · 19/06/2009, 11h04

Merci beaucoup.
Maintenant, Dans la nouvelel ligne que j'ai je voudrais remplacer la premiere cellule de la ligne par une zone de texte (au lieu du lien delete.php), la deuxieme cellule par un <select></select> (au lieu du lien delete.php) et la troisieme cellule par un <textarea></textarea> (au lieu du lien delete.php).

Merci d'avance

**le_chomeur** · 19/06/2009, 11h21

tu utilise :
var contentCel1 = document.createElement('input');
contentCel1.type = "text";
...

sinon tu peux utiliser ceci :

http://www.developpez.net/forums/d53...ynamique-form/

création d'élément de formulaire

**vermine** · 19/06/2009, 11h24

Là, c'est un cours qu'il vous faut. Une réponse toute faite serait un peu trop simple. Essayez de comprendre par vous même, ainsi vous pourrez faire pil poil ce que vous désirez. Une partie de réponse est dans le script que vous nous avez présenté:

Code :

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

1
2
3
4
5
6
 
var cell = document.createElement("td");
eAnchor = document.createElement("a"); //Création d'un tag <a></a>
eAnchor.setAttribute("href","delete.php"); //précision d'un href <a href="delete.php"></a>
eAnchor.appendChild(document.createTextNode("[Delete]")); //Ajout d'un text <a href="delete.php">[Delete]</a>
cell.appendChild(eAnchor);

Ici, on crée un élément "a", à savoir un tag <a>. Faites de même avec les élément que vous désirez.

Alors effectivement il y a plusieurs manière de faire:

Code :

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

1
2
3
4
5
6
 
var cell = document.createElement("td");
eAnchor = document.createElement("a"); //Création d'un tag <a></a>
eAnchor.href = "delete.php"; //précision d'un href <a href="delete.php"></a>
eAnchor.innerText = "[Delete]"; //Ajout d'un text <a href="delete.php">[Delete]</a>
cell.appendChild(eAnchor);

**billyrose** · 19/06/2009, 11h37

Merci pour vos explications. Je souhaiterais savoir ce que fait InnerHTML.
Merci

**vermine** · 19/06/2009, 11h40

La différence entre innerText et innerHTML est que innerHTML va interprêter le text écrit et détecter les balises HTML. Exemple:

innerText = "<b>coucou</b>";
Donnera: <b>coucou</b>

innerHTML = "<b>coucou</b>";
Donnera: coucou

**billyrose** · 19/06/2009, 11h48

Puis je utiliser InnerHTML pour creer une balise Input de type submit?

Billy

**vermine** · 19/06/2009, 11h52

Renseignez-vous un peu sur ce que le_chomeur vous a donné. Il a d'ailleurs précisé ceci:

Code :

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

1
2
3
var contentCel1 = document.createElement('input');
contentCel1.type = "text";

Et si vous testiez ceci :

Code :

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

1
2
3
 
var contentCel1 = document.createElement('input');
contentCel1.type = "submit";

**le_chomeur** · 19/06/2009, 12h00

oui mais déconseillé, et pour éviter d'expliquer pour la X eme fois pourquoi je t'invite a faire une recherche sur le forum

**vermine** · 19/06/2009, 12h02

Je ne sais pas. Je n'en ai jamais fait. Je fais des

Code :

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

<a><img src="monBeauBouton.gif"/></a>

C'est déconseillé aussi ?

**billyrose** · 19/06/2009, 12h23

salut,

Ouf qu'est ce qui est deconseille?
j'ai re-ecrit mon code javascript comme cei:

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
<script>
    function start(m) {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];
 
        // creates a <table> element and a <tbody> element
        //var tbl = document.createElement("table");
 
		var tbl = document.getElementById("table");
        var tblBody = document.createElement("tbody");
 
        // creating all cells
        //for (var j = 0; j < 2; j++) {
            // creates a table row
            var row = document.createElement("tr");
 
            //for (var i = 0; i < n; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell_1 = document.createElement("td");
				var cell_2 = document.createElement("td");
				var cell_3 = document.createElement("td");
				var cell_4 = document.createElement("td");
 
				var cell1=document.createElement("input");
				cell1.type="text";
				cell1.name="fname";
				cell1.size="20";
				cell1.maxlength="50";
				cell_1.appendChild(cell1)
 
				var cell2=document.createElement("textarea");
				cell2.name="fdescription";
				cell2.rows="2";
				cell2.cols="30";
				cell_2.appendChild(cell2)
 
				var cell3 = document.createElement("a");
				cell3.setAttribute("href","delete.php");
				cell3.appendChild(document.createTextNode("[Delete]"));
                cell_3.appendChild(cell3);
 
				var cell4 = document.createElement("a");
				cell4.setAttribute("href","delete.php");
				cell4.appendChild(document.createTextNode("[Delete]"));
                cell_4.appendChild(cell4);
 
                row.appendChild(cell_1);
				row.appendChild(cell_2);
				row.appendChild(cell_3);
				row.appendChild(cell_4);
           // }
 
            // add the row to the end of the table body
            tblBody.appendChild(row);
        //}
 
        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "1");
    }
<form>
 
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table">
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="submit" value="Add Functionality" onclick='start();'></td></tr>
 
	</table>
</form>
</script>

Et ca marche parfait. Probleme, etant donne que l'utilisateur clique plusieurs fois sur Add Functionality.
Avez vous une idee de comment je peux stocker les valeurs que le user entrent?
J'ai pense aux tableaux (mais en php), je ne suis pas du tout a l'aise avec Javascript. Mais des lors comment identifier que le user a cliquer sur Add Functionality de telle sorte que les valeurs precedentes (ligne avant le nouveau click du user) soient sauvegarder dans ma table?

Merci d'avance.

Billy

**le_chomeur** · 19/06/2009, 13h17

Le fait d'utiliser innerHTML pour la création d'élément de type formulaire pose plusieurs problèmes sur les différents navigateurs :

- les objet ne sont pas toujours postés
- problème sous ie concernant les noms de ces éléments

voila les 2 principaux problèmes liés , mais bc d'autres nous sont apparut au fur et a mesure des différents discutions sur le forum

**billyrose** · 19/06/2009, 13h39

merci.

J'ai copie un example de liste liees, pour que je puis faire mon select.

J'ai mon code qui cree la liste deroulante (add_function.php qui est similaire sur a ajaxlivre.php dans l'exemple des listes liees). Ce code marche parfaitement (mysqli_connect.php etablit la connexion a ma BD)

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
<?php 
                require_once ('../mysqli_connect.php');
                echo '<select name="fstatus" style="width: 150px">';
 
                // Retrieve all the statuses of a functionality
                $q = "SELECT F_status_ID, Functionality_status FROM fstatuses ORDER BY F_status_ID ASC";
                $r = mysqli_query($dbc, $q);
                if (mysqli_num_rows($r) > 0) {
                        while ($menu_row = mysqli_fetch_array($r, MYSQLI_NUM)) {
                                echo "<option value=\"$menu_row[0]\">$menu_row[1]</option>\n";
                        }
                }
                echo '</select>';
                mysqli_free_result($r);
                unset($menu_row);?>

Ensuite, j'adapte le code des listes liees comme suit:

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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('status').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","add_function.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<label>Functionality Status</label>
				<div id='status' style='display:inline'>
				<select name='fstatus'>
					<option value='-1'>Choisir un Status</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Voila ma liste est cree mais il y a rien a l'interieur.

Qu'ai je mal fait?? ou mal adapte??

Merci

Billy

**le_chomeur** · 19/06/2009, 13h49

commence par vérifier que ton retour est corect : alert(leselect) ;

tu pourras ensuite commencer a faire l'insertion

**vermine** · 19/06/2009, 13h52

Tout dépend de ce que contient "leselect", mais d'après le commentaire écrit, au lieu de:

Code :

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

1
2
3
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('status').innerHTML = leselect;

Ce ne serait pas plutôt:

Code :

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

1
2
3
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('fstatus').innerHTML = leselect;

**le_chomeur** · 19/06/2009, 13h54

nop vermine, status, fait référence à la div , sftatus à la liste, hors le code php retourne la liste avec les options

Creation tables apres click sur un bouton

JavaScript

Discussions similaires

Partager

Partager