Creation des lignes d'une table

billyrose · 18-06-2009 09:35:21

Bonjour a tous,

J'ai un formulaire donc le code est le suivant:

<?php

require_once ('../mysqli_connect.php');

?>

<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><a href="add_functionality.php">[Add functionality]</a></td></tr>

  </table>

</td></tr>

</table>

Je voudrais que quand l'utlisateur clique sur [Add functionality], s'ajoute une nouvelle ligne de la table et ainsi de suite.

j'ecris donc le code suivant add_functionality.php

<tr>

    <td><input type="text" name="fname" style="background:#FFFFCC" size="20" maxlength="50" value="<?php if (isset($trimmed['fname'])) echo $trimmed['fname']; ?>" /></td>

    <td> <textarea name="fdescription" rows="2" cols="30" wrap="hard" ><?php if (isset($_POST['fdescription'])) echo $_POST['fdescription']; ?></textarea> </td>

    <td><?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);?> </td>

    <td valign="center"><a href="delete.php">[delete]</a></td>

    </tr>

j'inclus ce code dans le premier code ci-dessus de la facon suivante:

<?php

require_once ('../mysqli_connect.php');

?>

<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><a href="add_functionality.php">[Add functionality]</a></td></tr>

    <?php require_once('../PHP-TESTS/add_functionality.php') ?>

  </table>

</td></tr>

</table>

le tout c'est que je ne clique meme pas sur le lien [Add functionality] mais la ligne que je veux ajouter s'affiche .

pourriez vous m'aider a creer des lignes de mon tableau au fur et a mesure que l'utilisateur clique sur [Add functionality]?
Il y aussi les variables, comment je les gere?

Merci d'avance.

Billy

Maljuna Kris · 22-06-2009 16:11:47

Ça sent l'AJAX amoniaqué à plein nez cette affaire.

billyrose · 22-06-2009 16:30:42

Oui justement j'ai utilise AJAX:

j'ai un code qui cree la ligne (status.php)

<tr>

<td><input type="text" name="depname" size="30" 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>

Ensuite, j'ecris le code suivant:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

          }

        }

        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" id="table"> 

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

le alert(xhr.responseText); affiche le code renvoye par le serveur. Et la je vois vien que mon code qui est dans status.php genere un code html.

Mais je change alert(xhr.responseText); par document.getElementById(table).innerHTML +=xhr.responseText; et la rien.
Quand je clique sur "Ajouter" rien ne semble se passer.

Une idee?? je sais plus quoi tenter poru que ca marche.

Merci

Maljuna Kris · 22-06-2009 16:40:51

C'est quoi l'élément dont l'Id est contenu dans la variable javascript table ?

document.getElementById(table)

billyrose · 22-06-2009 16:41:40

c'est une table.

<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table">

Maljuna Kris · 22-06-2009 16:44:25

Mais une table n'a pas d'attribut innerhtml, à ma connaissance.

billyrose · 22-06-2009 16:46:16

comment puis je faire alors pour afficher ma ligne stockee dans xhr.responseText?

Merci

Maljuna Kris · 22-06-2009 16:50:54

Pour créer dynamiquement ds lignes (<tr></tr>) et des celulles (<td> </td> ou <th></th>) dans un tableau html en javascript il faut passer par les méthodes de l'objet DOM.
Lis ce tuto, par exemple :https://developer.mozilla.org/fr/Explor … JavaScript
Et je vais passer ce post sur le forum Javascript.

billyrose · 22-06-2009 16:53:19

j'ai deja lu ce tuto. la difference est que le xhr.responseText que j'ai, a deja les balises <tr> et <td>.

Donc je ne peux plus utiliser ce tutoriel. une autre solution?

Merci

Maljuna Kris · 22-06-2009 17:00:43

billyrose a écrit :

j'ai deja lu ce tuto. la difference est que le xhr.responseText que j'ai, a deja les balises <tr> et <td>.
Donc je ne peux plus utiliser ce tutoriel. une autre solution?

Oui, modifier ce qui génère ton xhr.responseText.

billyrose · 22-06-2009 17:03:40

ce que genere mon xhr.responseText, est le resultat déxecution du code suivant:

<tr>

<td><input type="text" name="depname" size="30" 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>

Si j'enleve les <tr> et <td> qui sont la, comment je vais faire pour deliminter les differentes cellules?
J;ai 4 cellules:

- la 1ere cellule est une zone de texte
- la 2eme un textarea
-la 3eme, une liste deroulante
- la 4eme un href

J'utilise <td> pour les separer. Si j'enleve le <td> comment ferais pour les separer?

Merci

Maljuna Kris · 22-06-2009 17:07:35

Il te faut penser différemment.
Tu brûles les étapes, la génération dynamique des balises internes d'un tableau html ne peut se faire qu'en javascript dans le document contenant ce tableau par l'intermédiaire des méthodes du DOM, comme je te l'ai déjà dit.

billyrose · 22-06-2009 17:12:47

je sais. le probleme est que je suis passe par AJAX tout simplement parce que les options de ma liste deroulante proviennent dúne table de ma BD. Et je ne peux pas utiliser JS pour le faire donc jétais presque oblige d'utiliser AJAX.

Maljuna Kris · 22-06-2009 21:32:34

Et alors ? Qui di AJAX dit, entre autres, javascript. Sauf que le script PHP ne doit pas retourner du html.

billyrose · 23-06-2009 08:33:06

Bonjour,

J' ai modifie mon code de facon a creer mes cellules tdans javascript.

alors j'ai une fichier fstatus.php execute avec AJAX:

<?php

require_once ('../mysqli_connect.php');       

    // Retrieve all the statuses of a functionality

    echo "<select name='status'>";

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

    echo "</select>";

 ?>

Il est tout simple et me renvoie juste ma liste deroulante.
Ensuite j'ai le fichier funcs.php comme ceci:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script>

   function getXhr(){

                var xhr = null; 

        if(window.XMLHttpRequest) // Firefox and others

           xhr = new XMLHttpRequest(); 

        else if(window.ActiveXObject){ // Internet Explorer 

           try {

                      xhr = new ActiveXObject("Msxml2.XMLHTTP");

                  } catch (e) {

                      xhr = new ActiveXObject("Microsoft.XMLHTTP");

                  }

        }

        else { // XMLHttpRequest not supported by your browser

           alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 

           xhr = false; 

        } 

                                return xhr

      }

      /**

      *  method called when the user clicks on the button

      */

      function go(){

        var xhr = getXhr()

        // We defined what we gonna do with the response

        xhr.onreadystatechange = function(){

          // We do somthing once the server's response is OK

          if(xhr.readyState == 4 && xhr.status == 200){

            var body = document.getElementsByTagName("body")[0];

          // Retrieve <table> element and create a <tbody> element

            var tbl = document.getElementById("table");

            var tblBody = document.createElement("tbody");

            var row = document.createElement("tr");

          // Create  <td> elements 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");

          // Create the first cell which is a text zone 

            var cell1=document.createElement("input");

            cell1.type="text";

            cell1.name="fname";

            cell1.size="20";

            cell1.maxlength="50";

            cell_1.appendChild(cell1);

          // Create the second cell which is a text area  

            var cell2=document.createElement("textarea");

            cell2.name="fdescription";

            cell2.rows="2";

            cell2.cols="30";

            cell_2.appendChild(cell2);

          // Create the third cell which is a combo box           

          // retrieve the xhr response and put it on a cell

            var cell3=xhr.responseText;

            document.getElementById('status').innerHTML = cell3;  

            cell_3.appendChild(cell3);

          // Create the fourth cell which is a href

            var cell4 = document.createElement("a");

            cell4.setAttribute("href","delete.php");

            cell4.appendChild(document.createTextNode("[Delete]"));

            cell_4.appendChild(cell4);

          // add cells to the row

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

        }

          }

        xhr.open("GET","fstatus.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" id="table"> 

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

Je teste sur IE et aucun resultat. Je clique Ajouter mais rien ne semble se passer.

Merci

Dernière modification par billyrose (23-06-2009 08:35:56)

billyrose · 23-06-2009 08:37:33

Quand je mets en commentaires ces instructions:

/*var cell3=xhr.responseText;
document.getElementById('status').innerHTML = cell3;
cell_3.appendChild(cell3);*/
//row.appendChild(cell_3);

Les autres cellules s'affichent quand je clique sur Ajouter
Comment pusi je faire pour parfaitement interpreter ma liste deroulante renvoyee par AJAX?

Merci

billyrose · 23-06-2009 09:04:07

Quand je relis mon code je me rends compte que je n'ai pas de ID "status" car dans le select jái juste mis

<select name="status">

.
Est il possible d'ecrire

<select name="status" id="status">

et ensuite de faire:

var cell_3 = document.createElement("td");

var cell3=xhr.responseText;

document.getElementById('status').innerHTML = cell3;  

cell_3.appendChild(cell3)

row.appendChild(cell_3);

Si j'ai totelement tort, y a t-il une autre facon d'aborder ce probleme? parceque JS est entrain de me rendre dingue.

Merci

Pierrot · 29-11-2009 11:42:20

>>>Mais une table n'a pas d'attribut innerhtml, à ma connaissance.

à ta connaissance, peut être que non, mais à la mienne, oui

put1, que de lignes pour faire un simple tableau

a++

PHP|Débutant :: Forums

Advertisement

#1 18-06-2009 09:35:21

Creation des lignes d'une table

#2 22-06-2009 16:11:47

Re : Creation des lignes d'une table

#3 22-06-2009 16:30:42

Re : Creation des lignes d'une table

#4 22-06-2009 16:40:51

Re : Creation des lignes d'une table

#5 22-06-2009 16:41:40

Re : Creation des lignes d'une table

#6 22-06-2009 16:44:25

Re : Creation des lignes d'une table

#7 22-06-2009 16:46:16

Re : Creation des lignes d'une table

#8 22-06-2009 16:50:54

Re : Creation des lignes d'une table

#9 22-06-2009 16:53:19

Re : Creation des lignes d'une table

#10 22-06-2009 17:00:43

Re : Creation des lignes d'une table

#11 22-06-2009 17:03:40

Re : Creation des lignes d'une table

#12 22-06-2009 17:07:35

Re : Creation des lignes d'une table

#13 22-06-2009 17:12:47

Re : Creation des lignes d'une table

#14 22-06-2009 21:32:34

Re : Creation des lignes d'une table

#15 23-06-2009 08:33:06

Re : Creation des lignes d'une table

#16 23-06-2009 08:37:33

Re : Creation des lignes d'une table

#17 23-06-2009 09:04:07

Re : Creation des lignes d'une table

#18 29-11-2009 11:42:20

Re : Creation des lignes d'une table

Pied de page des forums