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** · 22/06/2009, 12h52

Bonjour a tous,

j'ai un premier fichier qui me permet d'afficher l'entete d'une table (ecrit en HTML)

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
 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="ajax_req.js" type="text/javascript"></script>
</head>
<body>
<h1> Create an Item </h1>
<form  method="post">
	<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" Name= "Ajouter" Value="Ajouter" onclick="htmlData('status.php')"></a></td></tr>
 
 
	</table>
</form>
</body>
</html>

J'ajoute une nouvelle ligne en executant le code status.php qui est :

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
<tr>
<td><input type="text" name="depname" size="20" maxlength="50" value="" /></td>
<td><select name="fstatus" style="width: 150px">';
 
<?php
require_once ('../mysqli_connect.php');                         
                // 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";
                        }
                }
                mysqli_free_result($r);
                unset($menu_row);
                 
 
 ?>
</select>
</td>
<td> <textarea name="fdescription" rows="2" cols="30" wrap="hard" ></textarea> </td>
<td valign="center"><a href="delete.php">[delete]</a></td>
</tr>

J'ai utilise JS-AJAX pour l'execution de mon code status.php
mon fichier js est le 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
function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}
 
function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
       }
   else {
 
   }
}
 
// Will populate data based on input
function htmlData(url, qStr)
{
   if (url.length==0)
   {
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }
 
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

Et la, rien. Quand je clique sur Ajouter, aucune ligne n'est ajoutee.

merci d'avance.

**billyrose** · 22/06/2009, 13h38

J'ai modifie mon fichier js et il apparait coe 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
 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <!--<script src="ajax_req.js" type="text/javascript"></script> -->
   <script>
   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){
						alert(xhr.responseText);
					}
				}
				xhr.open("GET","status.php",true);
				xhr.send(null);
			}
 
   </script>
</head>
<body>
<h1> Create an Item </h1>
<form  method="post">
	<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" Name= "Ajouter" Value="Ajouter" onclick="go()"></a></td></tr>
 
 
	</table>
</form>
</body>
</html>

et le fichier status.php est le 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
<tr>
<td><input type="text" name="depname" size="20" maxlength="50" value="" /></td>
<td><select name="fstatus" style="width: 150px">';
 
<?php
require_once ('../mysqli_connect.php');                         
                // 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";
                        }
                }
                mysqli_free_result($r);
                unset($menu_row);
                 
 
 ?>
</select>
</td>
<td> <textarea name="fdescription" rows="2" cols="30" wrap="hard" ></textarea> </td>
<td valign="center"><a href="delete.php">[delete]</a></td>
</tr>

Cette fois qund je clique sur Ajouter, le Alert m'affiche bien tout mon code status.php (voir fichier attache svp).

Comment puis je faire pour que ce code soit effectivement interprete par mon navigateur? ie que j'ai effectivement la ligne que je veux creer?

Merci

**Vil'Coyote** · 22/06/2009, 13h52

Salut,

l'utilisation d'ajax pour effectuer des ajouts de ligne avec tes données n'est pas une mauvaise idée. là ou ça coince et que tu va récupérer une ligne (c.f ton image) cependant comment récupère tu les précédente? et surtout comment l'ajouter?

car le but d'utiliser un tel script et de sélectionner au préalable une zone
d'affichage.
Personnellement, je n'utiliserais pas de tableau mais des div. un 'div' principale permettant d'afficher et de récupérer le contenu et des div généré par ton status.php au lie d'utiliser un tableau qui à mon sens ne permettra pas d'ajouter des lignes sauf si tu utilise le dom pour te balader dans l'arbo du tableau.

Donc en gros
dans ton jvs :

Code :

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

1
2
3
4
 
.......
document.getElementByid["principale"].innerHTML += xhr.responseText;
.......

Code :

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

1
2
3
4
5
 
ici ton tableau définissant la tête 
<div id='principale'>
/// ici l'affichage de tes lignes
</div>

maintenant si tu souhaite ajouter et supprime des lignes il faudra alors non plus limité à l'ajout simple dans 'principale' mais faire des ajout de div et faire du récursif pour la suppression.

**billyrose** · 22/06/2009, 13h56

Merci.

Oui je souhaite ajouter des lignes et pouvoir les supprimer aussi.
Je vais essayer ce que tu as propose.

**billyrose** · 22/06/2009, 14h08

voila comment j'ai modifie mon code js:

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
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script>
   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){
						//alert(xhr.responseText);
						document.body.innerHTML += xhr.responseText;
					}
				}
				xhr.open("GET","status.php",true);
				xhr.send(null);
			}
 
   </script>
</head>
<body>
<h1> Create an Item </h1>
<form  method="post">
	<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" Name= "Ajouter" Value="Ajouter" onclick="go()"></a></td></tr>
 
 
	</table>
</form>
</body>
</html>

et le code status.php:

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
<tr>
<td><input type="text" name="depname" size="20" maxlength="50" value="" /></td>
<td><select name="fstatus" style="width: 150px">';
 
<?php
require_once ('../mysqli_connect.php');                         
                // 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";
                        }
                }
                mysqli_free_result($r);
                unset($menu_row);
                 
 
 ?>
</select>
</td>
<td> <textarea name="fdescription" rows="2" cols="30" wrap="hard" ></textarea> </td>
<td valign="center"><a href="delete.php">[delete]</a></td>
</tr>

Mais voila l'affichage est horrible (voir figure attache)

Merci

Creation tables apres click sur un bouton

JavaScript

Vue hybride

Discussions similaires

Partager

Partager