Creation tables apres click sur un bouton

Version imprimable

Voir 40 message(s) de cette discussion en une page

1 pièce(s) jointe(s)

Creation tables apres click sur un bouton

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:

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

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:

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>

19/06/2009, 10h47
billyrose

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
19/06/2009, 10h48
vermine
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:

1 2 3 4 5 <script> function start() {/*la définition de la fonction... */ } start(); </script>
19/06/2009, 11h02
le_chomeur

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
19/06/2009, 11h04
billyrose

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
19/06/2009, 11h21
le_chomeur

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 ;)

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:

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:

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);

19/06/2009, 11h37
billyrose

Merci pour vos explications. Je souhaiterais savoir ce que fait InnerHTML.
Merci
19/06/2009, 11h40
vermine

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
19/06/2009, 11h48
billyrose

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

Billy

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

1 2 3 var contentCel1 = document.createElement('input'); contentCel1.type = "text";
Et si vous testiez ceci :
Code:

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

19/06/2009, 12h00
le_chomeur

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 ;)
19/06/2009, 12h02
vermine

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

Code:

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

C'est déconseillé aussi ?

salut,

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

Code:

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

19/06/2009, 13h17
le_chomeur

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 :)

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:

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:

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

19/06/2009, 13h49
le_chomeur

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

tu pourras ensuite commencer a faire l'insertion :)

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

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:

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

19/06/2009, 13h54
le_chomeur

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

Voir 40 message(s) de cette discussion en une page