Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1129 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  comment faire ? insertion dynamique de lignes dans un tableau

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

comment faire ? insertion dynamique de lignes dans un tableau

n°588188
Kermit_The​_Frog
Posté le 11-12-2003 à 11:02:12  profilanswer
 

Dans le cadre d'un stage, je dois réaliser un écran qui permet d'ajouter des lignes ou d'en supprimer dans un tableau affiché dans la page.
Et ce, bien évidemment en n'effaçant pas les lignes déjà encodées.
L'insertion dans la base de données MySql ne devant se faire qu'après validation de l'ensemble.
Quelqu'un a-t-il une idée ou un lien avec un tuto ? Paske là, je queutte depuis quasi une semaine pour trouver une solution. :pfff:  
Merciiiiiiii

mood
Publicité
Posté le 11-12-2003 à 11:02:12  profilanswer
 

n°588207
Mr yvele
yvele n'est plus.
Posté le 11-12-2003 à 11:14:00  profilanswer
 

fait une classe  [:sinclaire]


---------------
yvele n'est plus.
n°588210
Kermit_The​_Frog
Posté le 11-12-2003 à 11:18:35  profilanswer
 

J'y avais pensé mais je me demandais s'il n'y avait pas une autre solution.
je vais tenter cette voie.
Si tu connais un site avec un exemple, je suis preneur.

n°588216
Mr yvele
yvele n'est plus.
Posté le 11-12-2003 à 11:25:02  profilanswer
 

ben commence déjà à bosser dessus..
et montre nous.. si t'as un probleme, je serais ravi de t'aider..
 
mais par contre ici on est pas du style à te faire les exos à ta place [:ripeer]


---------------
yvele n'est plus.
n°588254
Hermes le ​Messager
Breton Quiétiste
Posté le 11-12-2003 à 12:04:26  profilanswer
 

Kermit_the_Frog a écrit :

Dans le cadre d'un stage, je dois réaliser un écran qui permet d'ajouter des lignes ou d'en supprimer dans un tableau affiché dans la page.
Et ce, bien évidemment en n'effaçant pas les lignes déjà encodées.
L'insertion dans la base de données MySql ne devant se faire qu'après validation de l'ensemble.
Quelqu'un a-t-il une idée ou un lien avec un tuto ? Paske là, je queutte depuis quasi une semaine pour trouver une solution. :pfff:  
Merciiiiiiii  


 
Ben c'est pas dur.
 
Tu fait donc une page de formulaire qui contient ton tableau. En bas de ce tableau donc le formulaire qui pointe vers une page de traitement. Cette page de traitement va donc "traiter" les données du formulaire, fait ce qu'il faut dans la BDD puis renvoie à nouveau vers la page qui contient ton tableau et le formulaire.

n°588273
Mara's dad
Yes I can !
Posté le 11-12-2003 à 12:37:53  profilanswer
 

Javascript :D
 
 
Démo :

Code :
  1. <html>
  2. <head>
  3. <script>
  4. var nb=3;
  5. function suppr( x )
  6. {
  7. var tb = '';
  8. for( i=1; i<=nb; i++ )
  9. {
  10.  if( x != i )
  11.  {
  12.   if( i < x )
  13.   {
  14.    j = i;
  15.   }
  16.   else
  17.   {
  18.    j = i - 1;
  19.   }
  20.   tb = tb + '<tr id="tr' + j + '"><td><input type="text" name="l' + j + '" id="l' + j + '"value="' + document.getElementById('l'+i).value + '"></td><td><button type="button" onclick="suppr(' + j + ')">Del</button></td></tr>';
  21.  }
  22. }
  23. if( document.all )
  24. {
  25.  document.getElementById('tb').outerHTML = '<table id="tb">' + tb + '</table>';
  26. }
  27. else
  28. {
  29.  document.getElementById('tb').innerHTML = tb;
  30. }
  31. nb--;
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <form>
  37. <table id="tb">
  38. <tr id="tr1"><td><input type="text" name="l1" id="l1" value="Ligne 1"></td><td><button type="button" onclick="suppr(1)">Del</button></td></tr>
  39. <tr id="tr2"><td><input type="text" name="l2" id="l2" value="Ligne 2"></td><td><button type="button" onclick="suppr(2)">Del</button></td></tr>
  40. <tr id="tr3"><td><input type="text" name="l3" id="l3" value="Ligne 3"></td><td><button type="button" onclick="suppr(3)">Del</button></td></tr>
  41. </table>
  42. <input type="submit">
  43. </form>
  44. </body>
  45. </html>


 
Bon, y'a que la suppression, je te laisse faire l'insertion !
 
Avec IE, outerHTML, pour NS/MOZ : innerHTML (donc sans <table...> et </table> )
 
Edit : Correction, oubli des id pour les <input...> :D


Message édité par Mara's dad le 11-12-2003 à 12:51:18

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°588282
Kermit_The​_Frog
Posté le 11-12-2003 à 13:14:41  profilanswer
 

merci beaucoup, je vais essayer tout ça (j'ai du pain sur la planche moi !)

n°588286
Mara's dad
Yes I can !
Posté le 11-12-2003 à 13:20:27  profilanswer
 

Tiens, j'ai fait l'ajout aussi pour rigoler !
 

Code :
  1. <html>
  2. <head>
  3. <script>
  4. var nb=0;
  5. function suppr( x )
  6. {
  7. var tb = '';
  8. for( i=1; i<=nb; i++ )
  9. {
  10.  if( x != i )
  11.  {
  12.   if( i < x )
  13.   {
  14.    j = i;
  15.   }
  16.   else
  17.   {
  18.    j = i - 1;
  19.   }
  20.   tb = tb + genLigne( j , document.getElementById('l'+i).value );
  21.  }
  22. }
  23. if( document.all )
  24. {
  25.  document.getElementById('tb').outerHTML = '<table id="tb">' + tb + '</table>';
  26. }
  27. else
  28. {
  29.  document.getElementById('tb').innerHTML = tb;
  30. }
  31. nb--;
  32. }
  33. function ins( x )
  34. {
  35. var tb = '';
  36. for( i=1; i<=nb; i++ )
  37. {
  38.  if( x == i )
  39.  {
  40.   tb = tb + genLigne( i , 'Nouvelle ligne N°' + i );
  41.  }
  43.  if( i < x )
  44.  {
  45.   j = i;
  46.  }
  47.  else
  48.  {
  49.   j = i + 1;
  50.  }
  51.  tb = tb + genLigne( j , document.getElementById('l'+i).value );
  52. }
  53. if( document.all )
  54. {
  55.  document.getElementById('tb').outerHTML = '<table id="tb">' + tb + '</table>';
  56. }
  57. else
  58. {
  59.  document.getElementById('tb').innerHTML = tb;
  60. }
  61. nb++;
  62. }
  64. function add()
  65. {
  66. var tb = '';
  68. nb++;
  69. tb = document.getElementById('tb').innerHTML + genLigne( nb , 'Nouvelle ligne N°' + nb );
  71. if( document.all )
  72. {
  73.  document.getElementById('tb').outerHTML = '<table id="tb">' + tb + '</table>';
  74. }
  75. else
  76. {
  77.  document.getElementById('tb').innerHTML = tb;
  78. }
  79. }
  81. function genLigne( num , value )
  82. {
  83. return( '<tr id="tr' + num + '"><td><input type="text" name="l' + num + '" id="l' + num + '" value="' + value + '"></td><td><button type="button" onclick="suppr(' + num + ');">Del</button><button type="button" onclick="ins(' + num + ');">Ins</button></td></tr>' );
  84. }
  86. </script>
  87. </head>
  88. <body>
  89. <form>
  90. <table id="tb">
  91. </table>
  92. <button type="button" onclick="add();">Add</button><input type="submit">
  93. </form>
  94. </body>
  95. </html>


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°588287
Kermit_The​_Frog
Posté le 11-12-2003 à 13:22:55  profilanswer
 

tu ne veux pas me faire un ajout de tes capacités dans mon cerveau par hasard ? ;-)
encore merci, un tout GRAND ! :-)

n°588288
Mara's dad
Yes I can !
Posté le 11-12-2003 à 13:26:39  profilanswer
 

Bof, je l'ai pondu de mémoire.
J'ai déjà fais un truc dans le genre pour un projet.
A l'époque, j'avais mis un certain temps à le faire...


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
mood
Publicité
Posté le 11-12-2003 à 13:26:39  profilanswer
 

n°589104
Kermit_The​_Frog
Posté le 12-12-2003 à 14:01:15  profilanswer
 

j'ai tenté de modifier mais ça fonctionne plus !
aaaahhh, j'suis trop paumé sur ce coup-là.
je nage en javascript et du coup, je ne saisis pas certaines subtilités de méthodes.
mon code :  

Code :
  1. <!-- this script is used to add/remove lines in the table -->
  2. <script language="javascript" >
  3. <!--
  4.   var nb=0;
  5.   const HEADERTABLE = '<TR><TD><B>from (dd-mm-yyyy)</B></TD>'
  6.       + '<TD><B>to (dd-mm-yyyy)</B></TD>'
  7.       + '<TD><B>qualification</B></TD>'
  8.       + '<TD><B>course attended</B></TD>'
  9.       + '<TD><B>diploma obtained</B></TD>'
  10.       + '<TD><B>distinction</B></TD>'
  11.       + '<TD><B>dissertation</B></TD>'
  12.       + '<TD><B></B></TD>'
  13.       + '<TD><B></B></TD>'
  14.       + '</TR>';
  15.   function suppr( x )
  16.   {
  17.      var tb = '';
  18.      for( i=1; i<=nb; i++ )
  19.      {
  20.         if( x != i )
  21.         {
  22.            if( i < x )
  23.            {
  24.               j = i;
  25.            }
  26.            else
  27.            {
  28.               j = i - 1;
  29.            }
  30.            tb = tb + genLigne( j , document.getElementById('l'+i).value );
  31.         }
  32.      }
  33.      if( document.all )
  34.      {
  35.         document.getElementById('tb').outerHTML = '<table id="tb">' + HEADERTABLE + tb + '</table>';
  36.      }
  37.      else
  38.      {
  39.         document.getElementById('tb').innerHTML = tb;
  40.      }
  41.      nb--;
  42.   }
  43.   function ins( x )
  44.   {
  45.      var tb = '';
  46.      for( i=1; i<=nb; i++ )
  47.      {
  48.         if( x == i )
  49.         {
  50.            tb = tb + genLigne( i , 'Nouvelle ligne N°' + i );
  51.         }
  53.         if( i < x )
  54.         {
  55.            j = i;
  56.         }
  57.         else
  58.         {
  59.            j = i + 1;
  60.         }
  61.         tb = tb + genLigne( j , document.getElementById('l'+i).value );
  62.      }
  63.      if( document.all )
  64.      {
  65.         document.getElementById('tb').outerHTML = '<table id="tb">' + HEADERTABLE + tb + '</table>';
  66.      }
  67.      else
  68.      {
  69.         document.getElementById('tb').innerHTML = tb;
  70.      }
  71.      nb++;
  72.   }
  74.   function add()
  75.   {
  76.      var tb = '';
  78.      nb++;
  79.      tb = document.getElementById('tb').innerHTML + genLigne( nb , 'Nouvelle ligne N°' + nb );
  81.      if( document.all )
  82.      {
  83.         document.getElementById('tb').outerHTML = '<table id="tb">' + HEADTABLE + tb + '</table>';
  84.      }
  85.      else
  86.      {
  87.         document.getElementById('tb').innerHTML = tb;
  88.      }
  89.   }
  91.   function genLigne( num , value )
  92.   {
  93.  return('<tr id="tr' + num + '">'
  94.         + '<TD><INPUT TYPE="TEXT" NAME="from_date-' + num + '" VALUE="" SIZE="10" MAXLENGTH="10">'
  95.         + '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  96.         + '<TD><INPUT TYPE="TEXT" NAME="to_date-' + num + '" VALUE="" SIZE="10" MAXLENGTH="10">'
  97.         + '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  98.         + '<TD><SELECT NAME="qualification_id-' + num + '" SIZE='1'>'
  99.         + '<OPTION VALUE="0" SELECTED>Java Engineer - Sun - Bruxelles - Belgium</OPTION>'
  100.         + '</SELECT><font color="#FF0000" size="3"><B> * </B></font>'
  101.         + '<INPUT TYPE="submit" NAME="qualifications" VALUE="New-' + num + '"></TD>'
  102.         + '<TD><INPUT TYPE="CHECKBOX" NAME="course_attended-' + num + '" VALUE="course_attended-' + num + '">'
  103.         + '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  104.         + '<TD><INPUT TYPE="CHECKBOX" NAME="diploma_obtained-' + num + '" VALUE="diploma_obtained-' + num + '">'
  105.         + '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  106.         + '<TD><INPUT TYPE="CHECKBOX" NAME="distinction-' + num + '" VALUE="distinction-' + num + '"></TD>'
  107.         + '<TD><INPUT TYPE="TEXT" NAME="dissertation-' + num + '" VALUE="" SIZE='30' MAXLENGTH='100'></TD>'
  108.         + '<TD><button type="button" onclick="ins(' + num + ');">Ins</button></TD>'
  109.   + '<TD><button type="button" onclick="suppr(' + num + ');">Del</button></TD>'
  110.      );
  111.   }
  112.   -->
  113. </script>
  114. </head>
  116. <body>
  118. <?php
  121. //-------------------------------------------------------------------------------------
  122.     function formCreateModify($database, $mode, $employee_id){
  123.      if ($mode == "create" ){
  124.   echo "<form method=\"POST\" "
  125.     ." action=\"qualif_prof_trainings.php?mode=insert&employee_id=$employee_id\">\n";
  127.   //--- qualification's part of the form
  128.   echo "<br>\n<div align=\"center\">Qualifications</div>\n<br>\n";
  129.   echo "<table id=\"tb\">\n";
  130.   echo "<TR><TD><B>from (dd-mm-yyyy)</B></TD>\n"
  131.     ."<TD><B>to (dd-mm-yyyy)</B></TD>\n"
  132.     ."<TD><B>qualification</B></TD>\n"
  133.     ."<TD><B>course attended</B></TD>\n"
  134.     ."<TD><B>diploma obtained</B></TD>\n"
  135.     ."<TD><B>distinction</B></TD>\n"
  136.     ."<TD><B>dissertation</B></TD>\n"
  137.     ."<TD><B></B></TD>\n"
  138.     ."<TD><B></B></TD>\n"
  139.     ."</TR>\n";
  140.   echo "</table>\n";
  141.   echo "<button type=\"button\" onclick=\"add();\">Add</button>\n";
  143.       //--- professionnal trainings' part of the form
  144.   echo "<br>\n<div align=\"center\">Professional trainings</div>\n<br>\n";
  146.   echo "<div align=\"center\"><input type=\"submit\" name=\"create\" value=\"create\">"
  147.      ."</div>\n";
  148.   echo "</form>\n";
  149.      }
  150.     } //end function formCreateModify)

n°589123
Mara's dad
Yes I can !
Posté le 12-12-2003 à 14:36:16  profilanswer
 

Ben c'est pourtant pas compliqué...
 
Déjà, tu le sort d'où le mot clef 'const' ?
Cà n'existe pas ce truc. Met var et çà va déjà mieux.
 
Ensuite, dans genLigne(), tu as des SIZE='1' au lieu de SIZE="1".
Ben oui, le ' çà ferme ta chaine, alors fait gaffe.
 
Ensuite, dans add() tu utilises  
HEADTABLE au lieu de
HEADERTABLE
Et çà, ben çà passe pas.
 
Ensuite, toujours dans add(). Il s'agit d'ajouter une ligne vide à la fin du tableau. genLigne() te retourne une ligne que tu ajoute à on tableau. Mais comme il faut regénérer le tableau entier tu fait çà :
tb = document.getElementById('tb').innerHTML + genLigne( nb , 'Nouvelle ligne N°' + nb );
Bon, tb contient l'ancien contenu du tableau plus une nouvelle ligne.
Ensuite, tu fait çà :
document.getElementById('tb').outerHTML = '<table id="tb">' + HEADTABLE + tb + '</table>';
Donc ton tableau conteint maintenant :
DEUX header + les lignes...
 
Au fait un header en html c'est pas  
<td><b>Blabla</b></td>  mais  
<th>Blabla<th>
 
Enfin, pour ins() et del() on verra plus tard quand le début marchera, mais si tu ne met pas un id sur chaque input, tu ne pourra pas les lire pour regénérer le tableu avec ce que l'utilisateur à saisi.
Il faudra aussi modifier genligne() pour passer toutes les valeurs. Soit par autant de paramètres que de <input>, soit par un tableau...


Message édité par Mara's dad le 12-12-2003 à 14:41:47

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°589130
Kermit_The​_Frog
Posté le 12-12-2003 à 14:43:43  profilanswer
 

ok, pour le const, j'étais persuadé que ça fonctionnait et puis non, non j'avais trouvé qu'il fallait l'enlever.  
Pour les ' j'avais foiré un copier/coller venant de mon code PHP et pas fais gaffe, scrogneugneu :)  
J'ai donc corrigé tout cela et ... ça va mieux :-)
mais j'ai encore une question "idiote" (on change pas une équipe qui gagne, merci de ta patience) :
je voudrais avoir une première ligne du tableau dès le chargement de la page.
Puis-je faire un appel de add() directement dans mon code php ?

n°589133
Mara's dad
Yes I can !
Posté le 12-12-2003 à 14:47:31  profilanswer
 

Ben tu peux par exemple le faire dans body !
<body onload="add();">


Message édité par Mara's dad le 12-12-2003 à 14:47:47

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°589136
Kermit_The​_Frog
Posté le 12-12-2003 à 14:48:31  profilanswer
 

merci le barbu, merci le barbu, merci !!!
j'ai déjà fait une partie des modifs, je continue ...

n°589137
Mara's dad
Yes I can !
Posté le 12-12-2003 à 14:49:10  profilanswer
 

Et puis ce qui serait bien c'est :  
un <html>
un <head>
un </body>
un </html>
Mais bon, s'est juste pour faire chier hein :D


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°589138
Mara's dad
Yes I can !
Posté le 12-12-2003 à 14:50:24  profilanswer
 

Pense à nous montrer ce que çà donne une fois fini STP ;)


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°589141
Kermit_The​_Frog
Posté le 12-12-2003 à 14:54:07  profilanswer
 

pas de prob pour la diffusion une fois fini !
en ce qui concerne les balises html, tout est incorporé dans un include header php :)

n°589142
Mara's dad
Yes I can !
Posté le 12-12-2003 à 14:56:46  profilanswer
 

Ok, c'est pour çà qu'on vois qu'un bout de code.
 
Le plus simple alors, c'est de montrer le HTML généré par PHP.
Parce-que pour débugger du javascript, il vaut mieux avoir EXACTEMENT la même chose que le navigateur ;)


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°589328
Kermit_The​_Frog
Posté le 12-12-2003 à 17:23:41  profilanswer
 

ça avance tout doucement
derniers points améliorés :  

  • gestion des valeurs déjà remplies grâce à un tableau
  • protection pour empêcher le user de supprimer l'unique ligne d'un tableau  

cool, je continue lundi paske là, c'est week-end !  :sol:  

n°591327
Mara's dad
Yes I can !
Posté le 15-12-2003 à 19:00:03  profilanswer
 

Nouvelle version en utilisant DOM au lieu de bricoller le HTML :D
 

Code :
  1. <html>
  2. <head>
  3. <script>
  4. function suppr( myNode )
  5. {
  6. // Spécial IE qui ne fait pas les choses suivant la norme :/
  7. if( document.all )
  8. {
  9.  myNode = window.event.srcElement;
  10. }
  11. // myNode.parentNode.parentNode est le parent <tr> du parent <td> du bouton <button>+</button>
  12. // myNode.parentNode.parentNode.parentNode est le parent <tbody> du parent <tr> du parent <td> du bouton <button>+</button>
  13. // Donc on supprime <tr> du bouton sur lequel on click du <tbody>.
  14. myNode.parentNode.parentNode.parentNode.removeChild( myNode.parentNode.parentNode );
  15. }
  16. function ins( myNode )
  17. {
  18. // Spécial IE qui ne fait pas les choses suivant la norme :/
  19. if( document.all )
  20. {
  21.  myNode = window.event.srcElement;
  22. }
  23. // myNode.parentNode.parentNode est le parent <tr> du parent <td> du bouton <button>+</button>
  24. // myNode.parentNode.parentNode.parentNode est le parent <tbody> du parent <tr> du parent <td> du bouton <button>+</button>
  25. // Donc on ajoute un nouveau <tr> dans le <tbody> avant le <tr> du bouton sur lequel on click.
  26. myNode.parentNode.parentNode.parentNode.insertBefore( newLine(), myNode.parentNode.parentNode );
  27. }
  29. // Ajout d'une ligne en fin de tableau
  30. function add()
  31. {
  32. // tb est le <tbody> de notre table
  33. // On lui ajoute un nouveau <tr>
  34. document.getElementById('tb').appendChild( newLine() );
  35. }
  37. // Génération d'une ligne vide pour le tableau
  38. // Il nous faut :
  39. // 1 tr
  40. // 2 td
  41. // 1 input
  42. // 2 boutons
  43. function newLine()
  44. {
  45. // Un nouveau <tr>
  46. var newTR = document.createElement( 'tr' );
  48. // Un nouveau <td>
  49. var newTD1 = newTR.appendChild( document.createElement( 'td' ) );
  51. // Un nouvel <input>  
  52. var newInput = newTD1.appendChild( document.createElement( 'input' ) );
  53. newInput.setAttribute( 'type', 'text' );
  54. newInput.setAttribute( 'name', 'data[]' );
  55. newInput.setAttribute( 'value', 'Nouvelle cellule' );
  57. // Un autre <td>
  58. var newTD2 = newTR.appendChild( document.createElement( 'td' ) );
  60. // Un bouton <button>
  61. var btDel = newTD2.appendChild( document.createElement( 'button' ) );
  62. btDel.setAttribute( 'type', 'button' );
  63. btDel.setAttribute( 'onclick', 'suppr(this);' );
  64. // Spécial IE qui ne fait pas les choses suivant la norme :/
  65. if( document.all )
  66. {
  67.  btDel.attachEvent( 'onclick', suppr );
  68. }
  69. btDel.appendChild( document.createTextNode( '-' ) );
  71. // Un autre bouton <button>
  72. var btIns = newTD2.appendChild( document.createElement( 'button' ) );
  73. btIns.setAttribute( 'type', "button" );
  74. btIns.setAttribute( 'onclick', 'ins(this);' );
  75. // Spécial IE qui ne fait pas les choses suivant la norme :/
  76. if( document.all )
  77. {
  78.  btIns.attachEvent( 'onclick', ins );
  79. }
  80. btIns.appendChild( document.createTextNode( '+' ) );
  82. // On renvoie le <tr> avec tout ce qu'il contient.
  83. return newTR;
  84. }
  86. function init()
  87. {
  88. // Si le tableau est vide, on ajoute une ligne.
  89. // Attention, avec MOZILLA, il ne faut même par un retour à la ligne entre <tbody> et </tbody> sinon il considère qu'il y a un child.
  90. // IE est moins strict.
  91. if( ! document.getElementById( 'tb' ).hasChildNodes() )
  92. {
  93.  add();
  94. }
  95. }
  97. </script>
  98. </head>
  99. <body onload="init();">
  100. <form>
  101. <table>
  102. <tbody id="tb"></tbody>
  103. </table>
  104. <button type="button" onclick="add();">+</button>
  105. <input type="submit">
  106. </form>
  107. </body>
  108. </html>


 
C'est compatible IE et MOZ.
IE pose juste un problème avec la définition des attributs qui sont des événements. Obligé de passer par un truc à la con spécial IE. Voir commentaires :/
 
Une solution envisageable pour remplacer la construction d'une ligne entièrement à la main en javascript :
Ajouter un tableau pas affiché (style="display:none;" ) avec une ligne de référence qu'il suffira de cloner.
 
Ce qui donne :

Code :
  1. <html>
  2. <head>
  3. <script>
  4. function suppr( myNode )
  5. {
  6. // myNode.parentNode.parentNode est le parent <tr> du parent <td> du bouton <button>+</button>
  7. // myNode.parentNode.parentNode.parentNode est le parent <tbody> du parent <tr> du parent <td> du bouton <button>+</button>
  8. // Donc on supprime <tr> du bouton sur lequel on click du <tbody>.
  9. myNode.parentNode.parentNode.parentNode.removeChild( myNode.parentNode.parentNode );
  10. }
  11. function ins( myNode )
  12. {
  13. // myNode.parentNode.parentNode est le parent <tr> du parent <td> du bouton <button>+</button>
  14. // myNode.parentNode.parentNode.parentNode est le parent <tbody> du parent <tr> du parent <td> du bouton <button>+</button>
  15. // Donc on ajoute un nouveau <tr> dans le <tbody> avant le <tr> du bouton sur lequel on click.
  16. myNode.parentNode.parentNode.parentNode.insertBefore( document.getElementById( 'newLine' ).cloneNode( true ), myNode.parentNode.parentNode );
  17. }
  19. // Ajout d'une ligne en fin de tableau
  20. function add()
  21. {
  22. // tb est le <tbody> de notre table
  23. // On lui ajoute un nouveau <tr>
  24. document.getElementById('tb').appendChild( document.getElementById( 'newLine' ).cloneNode( true ) );
  25. }
  27. function init()
  28. {
  29. // Si le tableau est vide, on ajoute une ligne.
  30. // Attention, avec MOZILLA, il ne faut même par un retour à la ligne entre <tbody> et </tbody> sinon il considère qu'il y a un child.
  31. // IE est moins strict.
  32. if( ! document.getElementById( 'tb' ).hasChildNodes() )
  33. {
  34.  add();
  35. }
  36. }
  38. </script>
  39. </head>
  40. <body onload="init();">
  41. <form>
  42. <table>
  43. <thead>
  44.  <tr>
  45.   <th>Nom</th>
  46.   <th>Prénom</th>
  47.   <th>Adresse</th>
  48.   <th>Actions</td>
  49.  </tr>
  50. </thead>
  51. <tbody id="tb"></tbody>
  52. </table>
  53. <button type="button" onclick="add();">+</button>
  54. <input type="submit">
  55. </form>
  56. <table style="display:none;">
  57. <tbody>
  58.  <tr id="newLine">
  59.   <td>
  60.    <input type="text" name="Nom[]" value="...">
  61.   </td>
  62.   <td>
  63.    <input type="text" name="Prenom[]" value="...">
  64.   </td>
  65.   <td>
  66.    <input type="text" name="Adresse[]" value="...">
  67.   </td>
  68.   <td>
  69.    <button type="button" onClick="suppr(this)">-</button>
  70.    <button type="button" onClick="ins(this)">+</button>
  71.   </td>
  72.  </tr>
  73. </tbody>
  74. </table>
  75. </body>
  76. </html>


 
C'est quand même plus pratique comme çà, et en plus y'a plus le problème avec IE et le événements :D


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°591637
Kermit_The​_Frog
Posté le 16-12-2003 à 11:18:52  profilanswer
 

c'est effectivement plus pratique au niveau du codage :)
Par contre, je viens de terminer d'adapter la première version à mes besoins.  
voici le code HTML généré par PHP

Code :
  1. <html>
  2. <head>
  3. <title>-- Qualifications - professional trainings -- Solid Partners' Knowledge Management System</title>
  4. <link rel="stylesheet" href="kms.css" type="text/css">
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <!-- these scripts are used to add/remove lines in the tables -->
  8. <script language="Javascript" src="scripts/add_remove_line_qualifications.js">
  9. </script>
  10. <script language="Javascript" src="scripts/add_remove_line_prof_trainings.js">
  11. </script>
  12. </head>
  14. <body>
  16. <form name="qualTrainForm" method="GET"   
  17. action="qualif_prof_trainings.php?mode=insert&employee_id=789798">
  18. <br>
  20. <!-- premier tableau -->
  21. <div align="center">Qualifications</div>
  22. <br>
  23. <table id="tbQual" border="1">
  24. <TR>
  25. <TH><div align="center">from (dd-mm-yyyy)</div></TH>
  26. <TH><div align="center">to (dd-mm-yyyy)</div></TH>
  27. <TH><div align="center">qualification</div></TH>
  28. <TH><div align="center">course attended</div></TH>
  29. <TH><div align="center">diploma obtained</div></TH>
  30. <TH><div align="center">distinction</div></TH>
  31. <TH><div align="center">dissertation</div></TH>
  32. <TH></TH>
  33. <TH></TH>
  34. </TR>
  35. </table>
  36. <br>
  38. <!-- deuxième tableau -->
  39. <div align="center">Professional trainings</div>
  40. <br>
  41. <table id="tbTrain" border="1">
  42. <TR>
  43. <TH><div align="center">date (dd-mm-yyyy)</div></TH>
  44. <TH><div align="center">institution</div></TH>
  45. <TH><div align="center">subject</div></TH>
  46. <TH><div align="center">module</div></TH>
  47. <TH><div align="center">technology sector</div></TH>
  48. <TH><div align="center">business sector</div></TH>
  49. <TH><div align="center">certification</div></TH>
  50. <TH></TH>
  51. <TH></TH>
  52. </TR>
  53. </table>
  55. <!-- chargement des deux tableaux -->
  56. <body onload="addQual();addTrain();">
  58. <br>
  59. <div align="center">
  60. <input type="submit" name="create" value="create">
  61. </div>
  62. </form>
  64. <BR>
  65. </body>
  66. </html>


et les deux fonctions javascript fort proches l'une de l'autre, mais bon soyons complet  :ange:  
add_remove_line_qualifications.js

Code :
  1. <!--
  2.   var nbQual=0;
  3.   var numLinesQual = 0; //number of lines in the table
  4.   //header for the table
  5.   HEADERTABLEQUAL = '<TR><TH><div align="center">from (dd-mm-yyyy)</div></TH>'
  6.       + '<TH><div align="center">to (dd-mm-yyyy)</div></TH>'
  7.       + '<TH><div align="center">qualification</div></TH>'
  8.       + '<TH><div align="center">course attended</div></TH>'
  9.       + '<TH><div align="center">diploma obtained</div></TH>'
  10.       + '<TH><div align="center">distinction</div></TH>'
  11.       + '<TH><div align="center">dissertation</div></TH>'
  12.       + '<TH></TH>'
  13.       + '<TH></TH>'
  14.       + '</TR>';
  15.   //default values used to initialize the fields
  16.   DEFVALUESQUAL = new Array ("00-00-0000","00-00-0000",false,false,false,false,"" );
  18.   //function to delete the specified line
  19.   function delLineQual( x )
  20.   {
  21.      var tb = '';
  23.      numLinesQual--;
  24.      for( i=1; i<=nbQual; i++ )
  25.      {
  26.         if( x != i ){
  27.            if( i < x ){
  28.               j = i;
  29.            }
  30.            else{
  31.               j = i - 1;
  32.            }
  33.            //to get back the values of the fields
  34.            var savedValues = new Array(
  35.          document.getElementById('from_date'+i).value,
  36.                    document.getElementById('to_date'+i).value,
  37.                    document.getElementById('qualification_id'+i).value,
  38.                    document.getElementById('course_attended'+i).value,
  39.                    document.getElementById('diploma_obtained'+i).value,
  40.                    document.getElementById('distinction'+i).value,
  41.                    document.getElementById('dissertation'+i).value);
  43.            tb = tb + genLigneQual( j , savedValues );
  44.         }
  45.      }
  46.      if( document.all ){
  47.         document.getElementById('tbQual').outerHTML =
  48.            '<table id="tbQual" border="1">'
  49.            + HEADERTABLEQUAL + tb
  50.            + '</table>';
  51.      }
  52.      else{
  53.         document.getElementById('tbQual').innerHTML = HEADERTABLEQUAL + tb;
  54.      }
  55.      nbQual--;
  56.   }
  58.   //function to insert a line
  59.   function insertLineQual( x )
  60.   {
  61.      var tb = '';
  63.  numLinesQual++;
  64.      for( i=1; i<=nbQual; i++ ){
  65.     if( x == i ){
  66.            tb = tb + genLigneQual( i , DEFVALUESQUAL );
  67.         }
  69.         if( i < x ){
  70.            j = i;
  71.         }
  72.         else{
  73.            j = i + 1;
  74.         }
  75.         //to get back the values of the fields
  76.         var savedValues = new Array(
  77.       document.getElementById('from_date'+i).value,
  78.                 document.getElementById('to_date'+i).value,
  79.                 document.getElementById('qualification_id'+i).value,
  80.                 document.getElementById('course_attended'+i).checked,
  81.                 document.getElementById('diploma_obtained'+i).checked,
  82.                 document.getElementById('distinction'+i).checked,
  83.                 document.getElementById('dissertation'+i).value);
  85.         tb = tb + genLigneQual( j , savedValues );
  86.      }
  87.      if( document.all ){
  88.         document.getElementById('tbQual').outerHTML =
  89.            '<table id="tbQual" border="1">'
  90.            + HEADERTABLEQUAL + tb
  91.            + '</table>';
  92.      }
  93.      else{
  94.         document.getElementById('tbQual').innerHTML = HEADERTABLEQUAL + tb;
  95.      }
  96.      nbQual++;
  97.   }
  99.   //function to initialize the table
  100.   function addQual()
  101.   {
  102.      var tb = '';
  104.      nbQual++;
  105.      numLinesQual++;
  106.      tb = document.getElementById('tbQual').innerHTML
  107.     + genLigneQual( nbQual , DEFVALUESQUAL );
  109.      if( document.all ){
  110.         document.getElementById('tbQual').outerHTML =
  111.            '<table id="tbQual" border="1">'
  112.            + tb + '</table>';
  113.      }
  114.      else{
  115.         document.getElementById('tbQual').innerHTML = tb;
  116.      }
  117.   }
  119.   function genLigneQual( num , fieldValues )
  120.   {
  121.  var strReturn = '<tr id="tr' + num + '">'
  122.             + '<TD><INPUT TYPE="TEXT" NAME="from_date-' + num
  123.       +  '" ID="from_date' + num + '" VALUE="' + fieldValues[0]
  124.       +  '" SIZE="10" MAXLENGTH="10">'
  125.             +  '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  126.             + '<TD><INPUT TYPE="TEXT" NAME="to_date-' + num
  127.       +  '" ID="to_date' + num + '" VALUE="' + fieldValues[1]
  128.       +  '" SIZE="10" MAXLENGTH="10">'
  129.       +  '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  130.             + '<TD><SELECT NAME="qualification_id-' + num
  131.       +  '" SIZE="1" ID="qualification_id' + num + '">'
  132.             +  '<OPTION VALUE="0" SELECTED>Java Engineer - Sun - Bruxelles - Belgium</OPTION>'
  133.             +  '</SELECT><font color="#FF0000" size="3"><B> * </B></font>'
  134.             +  '<INPUT TYPE="submit" NAME="qualifications" VALUE="New"'
  135.       +  ' ID="qualifications' + num + '"></TD>';
  136.  if (fieldValues[3] == true){
  137.   //used to know if the checkbox was checked or not
  138.     strReturn = strReturn + '<TD width ="30">'
  139.      + '<INPUT TYPE="CHECKBOX" NAME="course_attended-'
  140.       + num + '" VALUE="course_attended-' + num
  141.         + '" ID="course_attended' + num + '" CHECKED>';
  142.  }
  143.  else{
  144.     strReturn = strReturn + '<TD width="30">'
  145.      + '<INPUT TYPE="CHECKBOX" NAME="course_attended-'
  146.       + num + '" VALUE="course_attended-' + num
  147.         + '" ID="course_attended' + num + '">';
  148.  }
  149.  strReturn = strReturn + '<font color="#FF0000" size="3"><B> * </B></font></TD>';
  150.  if (fieldValues[4] == true){
  151.     strReturn = strReturn + '<TD width="35">'
  152.     + '<INPUT TYPE="CHECKBOX" NAME="diploma_obtained-'
  153.        + num + '" VALUE="diploma_obtained-' + num
  154.        + '" ID="diploma_obtained' + num +'" CHECKED>';
  155.  }
  156.  else{
  157.   strReturn = strReturn + '<TD width="35">'
  158.      + '<INPUT TYPE="CHECKBOX" NAME="diploma_obtained-'
  159.        + num + '" VALUE="diploma_obtained-' + num
  160.        + '" ID="diploma_obtained' + num +'">';
  161.  }
  162.  strReturn = strReturn + '<font color="#FF0000" size="3"><B> * </B></font></TD>';
  163.  if (fieldValues[5] == true){
  164.     strReturn = strReturn + '<TD><INPUT TYPE="CHECKBOX" NAME="distinction-'
  165.     + num + '" VALUE="distinction-' + num + '" ID="distinction'
  166.        + num + '" CHECKED></TD>';
  167.  }
  168.  else{
  169.   strReturn = strReturn + '<TD><INPUT TYPE="CHECKBOX" NAME="distinction-'
  170.     + num + '" VALUE="distinction-' + num + '" ID="distinction'
  171.        + num +'"></TD>';
  172.  }
  173.  strReturn = strReturn + '<TD><INPUT TYPE="TEXT" NAME="dissertation-' + num
  174.     +  '" ID="dissertation' + num
  175.     +  '" VALUE="' + fieldValues[6]
  176.     +  '" SIZE="30" MAXLENGTH="100"></TD>'
  177.           + '<TD><img type="button" src="images/add_line.jpg" '
  178.     +   'onclick="insertLineQual(' + num + ');" '
  179.     +  'alt="insert a line before this one"></img></TD>';
  180.  //to avoid the user to delete the line if it's the only one in the table
  181.  if (numLinesQual > 1){
  182.  strReturn = strReturn + '<TD><img type="button" '
  183.     +  'src="images/rem_line.jpg" onclick="delLineQual(' + num
  184.      + ');" alt="remove this line"></img></TD>';
  185.  }
  186.  return(strReturn);
  187.   }
  188.   -->


add_remove_line_prof_trainings.js

Code :
  1. <!--
  2.   var nbTrain=0;
  3.   var numLinesTrain = 0; //number of lines in the table
  4.   //header for the table
  5.   HEADERTABLETRAIN = '<TR><TH><div align="center">date (dd-mm-yyyy)</div></TH>'
  6.        + '<TH><div align="center">institution</div></TH>'
  7.        + '<TH><div align="center">subject</div></TH>'
  8.        + '<TH><div align="center">module</div></TH>'
  9.        + '<TH><div align="center">technology sector</div></TH>'
  10.        + '<TH><div align="center">business sector</div></TH>'
  11.        + '<TH><div align="center">certification</div></TH>'
  12.        + '<TH></TH>'
  13.        + '<TH></TH>'
  14.           + '</TR>';
  15.   //default values used to initialize the fields
  16.   DEFVALUESTRAIN = new Array ("00-00-0000","","","","","",false);
  17.  
  18.   //function to delete the specified line
  19.   function delLineTrain( x )
  20.   {
  21.      var tb = '';
  23.      numLinesTrain--;
  24.      for( i=1; i<=nbTrain; i++ )
  25.      {
  26.         if( x != i )
  27.         {
  28.            if( i < x )
  29.            {
  30.               j = i;
  31.            }
  32.            else
  33.            {
  34.               j = i - 1;
  35.            }
  36.            //to get back the values of the fields
  37.            var savedValues = new Array(
  38.          document.getElementById('date'+i).value,
  39.                    document.getElementById('institution'+i).value,
  40.                    document.getElementById('subject'+i).value,
  41.                    document.getElementById('module'+i).value,
  42.                    document.getElementById('technology_sector'+i).value,
  43.                    document.getElementById('business_sector'+i).value,
  44.                    document.getElementById('certification'+i).value);
  46.            tb = tb + genLigneTrain( j , savedValues );
  47.         }
  48.      }
  49.      if( document.all )
  50.      {
  51.         document.getElementById('tbTrain').outerHTML =
  52.           '<table id="tbTrain" border="1">'
  53.           + HEADERTABLETRAIN + tb
  54.           + '</table>';
  55.      }
  56.      else
  57.      {
  58.         document.getElementById('tbTrain').innerHTML = HEADERTABLETRAIN + tb;
  59.      }
  60.      nbTrain--;
  61.   }
  63.   //function to insert a line
  64.   function insertLineTrain( x )
  65.   {
  66.      var tb = '';
  68.  numLinesTrain++;
  69.      for( i=1; i<=nbTrain; i++ )
  70.      {
  71.         if( x == i )
  72.         {
  73.            tb = tb + genLigneTrain( i , DEFVALUESTRAIN );
  74.         }
  76.         if( i < x )
  77.         {
  78.            j = i;
  79.         }
  80.         else
  81.         {
  82.            j = i + 1;
  83.         }
  84.         //to get back the values of the fields
  85.         var savedValues = new Array(
  86.       document.getElementById('date'+i).value,
  87.                 document.getElementById('institution'+i).value,
  88.                 document.getElementById('subject'+i).value,
  89.                 document.getElementById('module'+i).value,
  90.                 document.getElementById('technology_sector'+i).value,
  91.                 document.getElementById('business_sector'+i).value,
  92.                 document.getElementById('certification'+i).checked);
  94.         tb = tb + genLigneTrain( j , savedValues );
  95.      }
  96.      if( document.all )
  97.      {
  98.         document.getElementById('tbTrain').outerHTML =
  99.           '<table id="tbTrain" border="1">'
  100.           + HEADERTABLETRAIN + tb
  101.           + '</table>';
  102.      }
  103.      else
  104.      {
  105.         document.getElementById('tbTrain').innerHTML = HEADERTABLETRAIN + tb;
  106.      }
  107.      nbTrain++;
  108.   }
  110.   //function to initialize the table
  111.   function addTrain()
  112.   {
  113.      var tb = '';
  115.      nbTrain++;
  116.      numLinesTrain++;
  117.      tb = document.getElementById('tbTrain').innerHTML
  118.     + genLigneTrain( nbTrain , DEFVALUESTRAIN );
  120.      if( document.all )
  121.      {
  122.         document.getElementById('tbTrain').outerHTML =
  123.           '<table id="tbTrain" border="1">'
  124.           + tb + '</table>';
  125.      }
  126.      else
  127.      {
  128.         document.getElementById('tbTrain').innerHTML = tb;
  129.      }
  130.   }
  132.   function genLigneTrain( num , fieldValues )
  133.   {
  134.  var strReturn = '<tr id="tr' + num + '">'
  135.             + '<TD><INPUT TYPE="TEXT" NAME="date-' + num
  136.       +  '" ID="date' + num + '" VALUE="' + fieldValues[0]
  137.       +  '" SIZE="10" MAXLENGTH="10">'
  138.             +  '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  139.             + '<TD><INPUT TYPE="TEXT" NAME="institution-' + num
  140.       +  '" ID="institution' + num + '" VALUE="' + fieldValues[1]
  141.       +  '" SIZE="20" MAXLENGTH="50">'
  142.       +  '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  143.             + '<TD><INPUT TYPE="TEXT" NAME="subject-' + num
  144.       +  '" ID="subject' + num + '" VALUE="' + fieldValues[2]
  145.       +    '" SIZE="20" MAXLENGTH="50">'
  146.       + '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  147.       + '<TD><INPUT TYPE="TEXT" NAME="module-' + num
  148.       +  '" ID="module' + num + '" VALUE="' + fieldValues[3]
  149.       +  '" SIZE="20" MAXLENGTH="50">'
  150.        +  '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  151.       + '<TD><INPUT TYPE="TEXT" NAME="technology_sector-' + num
  152.       + '" ID="technology_sector' + num
  153.       +  '" VALUE="' + fieldValues[4]
  154.       +  '" SIZE="20" MAXLENGTH="50">'
  155.       +  '<font color="#FF0000" size="3"><B> * </B></font></TD>'
  156.       + '<TD><INPUT TYPE="TEXT" NAME="business_sector-' + num
  157.       + '" ID="business_sector' + num + '" VALUE="' + fieldValues[5]
  158.       + '" SIZE="20" MAXLENGTH="50"></TD>';
  159.  if (fieldValues[6] == true){
  160.     strReturn = strReturn + '<TD><INPUT TYPE="CHECKBOX" NAME="certification-'
  161.     + num + '" VALUE="certification-' + num + '" ID="certification'
  162.        + num + '" CHECKED></TD>';
  163.  }
  164.  else{
  165.   strReturn = strReturn + '<TD><INPUT TYPE="CHECKBOX" NAME="certification-'
  166.     + num + '" VALUE="certification-' + num + '" ID="certification'
  167.        + num +'"></TD>';
  168.  }
  169.  strReturn = strReturn + '<TD><img type="button" src="images/add_line.jpg" '
  170.     +   'onclick="insertLineTrain(' + num + ');" '
  171.     +  'alt="insert a line before this one"></img></TD>';
  172.  //to avoid the user to delete the line if it's the only one in the table
  173.  if (numLinesTrain > 1){
  174.  strReturn = strReturn + '<TD><img type="button" '
  175.     +  'src="images/rem_line.jpg" onclick="delLineTrain(' + num
  176.      + ');" alt="remove this line"></img></TD>';
  177.  }
  178.  return(strReturn);
  179.   }
  180.   -->


voilà, j'espère que l'affichage ne sera pas trop pourri parce que je n'arrive pas à voir jusqu'où je peux aller avec une ligne :(  
 
Je vais sans doute m'atteler à la modif' de ta dernière version le Barbu  :bounce:  
j'ai encore une question pratique (décidément, ce topic vire de plus ne plus franchement vers le javascript) : je voudrais ouvrir une popup lors du click sur un lien (ou un bouton) lié à un champ afin de permettre au user de choisir une valeur dans une liste (par exemple) et ensuite remplir le champ avec cette valeur. Le problème est le passage du nom du champ à remplir pour pouvoir utiliser une affectation du type :
window.opener.document.forms[0].nomChamp.value = valeurRecupérée
 
je vais faire une recherche sur le forum javascript mais si tu as une idée ...
 

n°591690
Mara's dad
Yes I can !
Posté le 16-12-2003 à 12:13:49  profilanswer
 

Avec ma nouvelle version effectivement tu va avoir un problème car je ne gère pas d'id pour chaque objet. Je passe juste 'this' à la fonction et je me débrouille avec les parentNode. Donc, quand tu clic sur un bouton de ton tableau pour ouvrir une fenêtre, il faut te débrouiller pour lui passer aussi une référence au champs de saisie à modifier.
Il faut regarder dans la doc du DOM pour trouver les méthodes qui vont bien.
Par exemple si tu as
<td>
    <input...>
    <button...></button>
</td>
 
Un clic sur le button vers une fonction avec this en paramètre.
this.parentNode est le td
this.parentNode.childNodes.item(0) est l'input !
 
Remarque sur ma dernière version.
 
Dans suppr( myNode ) par exemple, au lieu d'utiliser :
myNode.parentNode.parentNode.parentNode
pour désigner le <tbody>, je pourais faire :
document.getElementById('tb')
Ce qui serait plus lisible.
Mais çà limiterai la fonction à ce tableau. Comme c'est fait, il est possible de gérer plusieurs modèles de lignes de tableau avec les mêmes fonctions.
 
Autre remarque:
J'ai corrigé un petit bug dans la dernière version.
En fait en faisant un cloneNode du modèle de ligne, je fais une copie avec le même id :/
 
J'ai corrigé le js comme suis, pour effacer l'id après copie :
 

Code :
  1. function suppr( myNode )
  2. {
  3. // myNode.parentNode.parentNode est le parent <tr> du parent <td> du bouton <button>+</button>
  4. // myNode.parentNode.parentNode.parentNode est le parent <tbody> du parent <tr> du parent <td> du bouton <button>+</button>
  5. // Donc on supprime <tr> du bouton sur lequel on click du <tbody>.
  6. myNode.parentNode.parentNode.parentNode.removeChild( myNode.parentNode.parentNode );
  7. }
  8. function ins( myNode )
  9. {
  10. // myNode.parentNode.parentNode est le parent <tr> du parent <td> du bouton <button>+</button>
  11. // myNode.parentNode.parentNode.parentNode est le parent <tbody> du parent <tr> du parent <td> du bouton <button>+</button>
  12. // Donc on ajoute un nouveau <tr> dans le <tbody> avant le <tr> du bouton sur lequel on click.
  13. myNode.parentNode.parentNode.parentNode.insertBefore( newLine(), myNode.parentNode.parentNode );
  14. }
  16. // Ajout d'une ligne en fin de tableau
  17. function add()
  18. {
  19. // tb est le <tbody> de notre table
  20. // On lui ajoute un nouveau <tr>
  21. document.getElementById('tb').appendChild( newLine() );
  22. }
  24. function newLine()
  25. {
  26. var newTr = document.getElementById( 'newLine' ).cloneNode( true );
  27. newTr.removeAttribute( 'id' );
  28. return newTr;
  29. }
  31. function init()
  32. {
  33. // Si le tableau est vide, on ajoute une ligne.
  34. // Attention, avec MOZILLA, il ne faut même par un retour à la ligne entre <tbody> et </tbody> sinon il considère qu'il y a un child.
  35. // IE est moins strict.
  36. if( ! document.getElementById( 'tb' ).hasChildNodes() )
  37. {
  38.  add();
  39. }
  40. }


 
A+


Message édité par Mara's dad le 16-12-2003 à 12:27:20

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°591697
Mara's dad
Yes I can !
Posté le 16-12-2003 à 12:22:40  profilanswer
 

Attention !
 
Dans :

Code :
  1. <td>
  2.     <input...>
  3.     <button...></button>
  4. </td>

 
Un clic sur le button vers une fonction avec this en paramètre.
 
this.parentNode.childNodes.item(0) est l'input seulement dans IE !
Dans MOZ, c'est l'item(1). A cause du retour à la ligne et de la tabulation entre <td> et <input> !
Dans MOZ, c'est considéré comme un textNode, et c'est lui l'item(0)
 
Donc soit tu boucle sur les item en cherchant celui dont nodeName=='input', soit tu écris le HTML comme çà :

Code :
  1. <td><input...><button...></button></td>


 
Ca commence à devenir standard, mais c'est pas encore çà :/ :/ :/


Message édité par Mara's dad le 16-12-2003 à 12:24:03

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°591718
Kermit_The​_Frog
Posté le 16-12-2003 à 12:46:56  profilanswer
 

cool !
une fois encore : merci pour tes bons conseils et tes solutions ô combien efficaces !

n°593061
Mara's dad
Yes I can !
Posté le 18-12-2003 à 09:35:37  profilanswer
 

Modif dans la fonction suppr :
 
function suppr( myNode )
{
 // myNode.parentNode.parentNode est le parent <tr> du parent <td> du bouton <button>+</button>
 // Donc on supprime <tr> du bouton sur lequel on click.
 myNode.parentNode.parentNode.removeNode( true );
}
 
Pas grand chose. En fait c'est plus simple de faire removeNode() sur les node à supprimer que removeChild() sur le parent :D
 
Le booléen, c'est pour dire que tous les childs du node supprimé le sont aussi.


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°593220
Mara's dad
Yes I can !
Posté le 18-12-2003 à 11:27:17  profilanswer
 

Petite erreur :fou:
removeNode() est spécifique à IE :/


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  comment faire ? insertion dynamique de lignes dans un tableau

 

Sujets relatifs
passer un tableau de type à 2 dimensions en paramètre ? comment faire[ASP.NET] affiche le resultat sur plusieurs lignes
ACCESS : nom de fichier en dynamique dans Macro TransférerFeuilleCalc[Java]Declarer des variables de maniere dynamique?
[PHP/SQL] Insertion de caractères spéciaux dans une tablephp et allocation dynamique de tableau a 2 dimensions
comment centré un tableau verticalement ...Flash : insertion dans un mail
[HTML] Insertion de caractères spéciaux ! 
Plus de sujets relatifs à : comment faire ? insertion dynamique de lignes dans un tableau

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.309 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR