[JS]Inserer une ligne après la ligne sur laquelle on clique

Inserer une ligne après la ligne sur laquelle on clique [JS] - HTML/CSS - Programmation

Marsh Posté le 21-05-2007 à 13:55:53    

Bonjour à tous,  
 
Je cherche à inserer dans un tableau HTML, juste après la ligne sur laquelle j'ai cliqué.
 
J'ai fait :
 
HTML

Code :
  1. <tr onclick="insertRow(this)"></tr>


pour chaque ligne de mon tableau
 
JS

Code :
  1. function insertRow(row)
  2. //Récupération du numéro de ligne sur laquelle j'ai cliqué
  3. var indexligne_to_insert = parseInt(row.parentNode.rowIndex) + 1;
  4. tr = document.getElementById('tableau').insertRow(parseInt(indexligne_to_insert));


 
Malheureusement je m'apercoit que la fonction insertRow(), n'accepte que 0,1 et -1 comme valeur :/
Je vois pas trop comment faire   :love:  
Aidez moi ou je tue mon chien  :love:


Message édité par Alisteroid le 21-05-2007 à 13:57:02
Reply

Marsh Posté le 21-05-2007 à 13:55:53   

Reply

Marsh Posté le 21-05-2007 à 14:07:42    

je veux une tof du chien avant de repondre :D
 
sinon  
1- tu crée a ligne comme il faut avec dom ( avec des td = document.createElement('td') , un  tr = document.createElement('tr') et des tr.appendChild(td)  
 
2- si tu insere la ligne a la fin de ton tableau ( row.nextSibling est null ) tu fait un row.parentNode.appendChild(tr)
 
3 sinon, tu l'insere avant la suivante avec un row.parentNode.insertBefore(tr,row )  
 

Reply

Marsh Posté le 21-05-2007 à 14:10:04    

Tu pourrais me détailler la fonction un peu comme j'ai fait? je mélange un peu tout dans ce que tu me dis, et le JS c'est pas trop mon truc :/


Message édité par Alisteroid le 21-05-2007 à 14:10:11
Reply

Marsh Posté le 21-05-2007 à 14:12:07    

techniquement, j'ai mis plus de detail que toi( vu que j'utilse des fonctions qui existent reellement ) :D

 

apres, je te laisse un peux voir comment fonctionnnent les fct que je te donne ( en plus sans savoir la gueule de ton tableau , ca va etre chaud d'en faire plus )

 

a moins que tu n'ai des questions précises


Message édité par flo850 le 21-05-2007 à 14:12:21
Reply

Marsh Posté le 21-05-2007 à 14:22:05    

Code :
  1. function insertRow(row){
  2.       // Nouveau TD
  3.      var td= document.createElement('td');
  4.      td.appendChild(document.createTextNode('Nouvelle cellule '));
  5.      // Nouveau TD
  6.      var td2 = document.createElement('td');
  8.      // Nouveau TR
  9.      var tr = document.createElement('tr');
  10.      tr.appendChild(td);
  11.      tr.appendChild(td2);
  13.      // Ajout du nouveau TR au tableau
  14.     row.parentNode.insertBefore(tr,row )
  15. }


Putain, on est obligé de faire le travail soit même maintenant  [:zytrasnif]  
Bon ça marche, j'ai encore un truc, pour mettre un colspan sur une cellule, je fais  

Code :
  1. td.setAttribute("rowspan",2);

??
 
Merci beaucoup de ton aide, et de ta rapidité.
 
Et mes fonction utilisée au debut existent  [:cerveau thalis]  
 [:cerveau fuck]


Message édité par Alisteroid le 21-05-2007 à 14:24:52
Reply

Marsh Posté le 21-05-2007 à 14:25:17    

nan mais nan hein :o
insertRow fait ça très bien, c'est ptêt pas la peine d'en recoder une.
Et au passage insertRow prend bien un index et pas seulement 0,1 ou -1.

 

Par contre la propriété rowIndex c'est sur une ligne alors que tu l'as fait remonté au parentNode ( le tableau) ça risque donc pas de marcher.

 

Enfin pour qu'une "ligne"(tr) soit valide en DOM, il lui faut contenir au moins un td ( ce qui n'est pas le cas dans ton exemple).

 

Bref la fonction à peine retouché et qui "doit" marcher c'est:

Code :
  1. function insertRow(row){
  2.       var iL = parseInt(row.rowIndex) + 1;
  3.       tr = document.getElementById('tableau').insertRow(iL);
  4.       tr.innerHTML = 'new index:'+tr.rowIndex;
  5.     }
 

Note: un petit oeil sur la doc t'aurais appris tout ça: http://developer.mozilla.org/en/do [...] .insertRow

Message cité 2 fois
Message édité par anapajari le 21-05-2007 à 14:25:55
Reply

Marsh Posté le 21-05-2007 à 14:25:43    

:sol:


Message édité par flo850 le 21-05-2007 à 14:25:51
Reply

Marsh Posté le 21-05-2007 à 14:28:36    

anapajari a écrit :

nan mais nan hein :o
insertRow fait ça très bien, c'est ptêt pas la peine d'en recoder une.
Et au passage insertRow prend bien un index et pas seulement 0,1 ou -1.
 
Par contre la propriété rowIndex c'est sur une ligne alors que tu l'as fait remonté au parentNode ( le tableau) ça risque donc pas de marcher.
 
Enfin pour qu'une "ligne"(tr) soit valide en DOM, il lui faut contenir au moins un td ( ce qui n'est pas le cas dans ton exemple).
 
Bref la fonction à peine retouché et qui "doit" marcher c'est:

Code :
  1. function insertRow(row){
  2.       var iL = parseInt(row.rowIndex) + 1;
  3.       tr = document.getElementById('tableau').insertRow(iL);
  4.       tr.innerHTML = 'new index:'+tr.rowIndex;
  5.     }


 
Note: un petit oeil sur la doc t'aurais appris tout ça: http://developer.mozilla.org/en/do [...] .insertRow


c'est vrai que j'avais pas pensé a insertRow + innerHTML
mais je préfère faire les cases a la main pour gérer le contenu , et les styles à appliquer

Reply

Marsh Posté le 21-05-2007 à 14:31:37    

nan mais le inner il est violement goret faut pas faire ça !!!
C'était juste pour voir quelque chose que je l'ai laissé trainé! [:dawak]
On est censé faire du insertCell et du createTextNode pour mettre des données dedans

 

note: j'ai par contre pas compris ton argument sur les styles :o

Message cité 1 fois
Message édité par anapajari le 21-05-2007 à 14:31:59
Reply

Marsh Posté le 21-05-2007 à 14:31:46    

anapajari a écrit :

nan mais nan hein :o
insertRow fait ça très bien, c'est ptêt pas la peine d'en recoder une.
Et au passage insertRow prend bien un index et pas seulement 0,1 ou -1.

 

Par contre la propriété rowIndex c'est sur une ligne alors que tu l'as fait remonté au parentNode ( le tableau) ça risque donc pas de marcher.

 

Enfin pour qu'une "ligne"(tr) soit valide en DOM, il lui faut contenir au moins un td ( ce qui n'est pas le cas dans ton exemple).

 

Bref la fonction à peine retouché et qui "doit" marcher c'est:

Code :
  1. function insertRow(row){
  2.       var iL = parseInt(row.rowIndex) + 1;
  3.       tr = document.getElementById('tableau').insertRow(iL);
  4.       tr.innerHTML = 'new index:'+tr.rowIndex;
  5.     }
 

Note: un petit oeil sur la doc t'aurais appris tout ça: http://developer.mozilla.org/en/do [...] .insertRow


Merci pour ton aide aussi, j'ai cherché aussi t'inquiete pas j'ai ramé une heure avant de poster, je viens pas chialer ici au moindre probleme  :D
Bref merci encore je crois que je vais continuer sur ma solution bien plus simple, mon site ne doit être compatible que IE6, donc c'est très bien :D, on me demande d'aller au plus vite, du moment que ça marche, c'est bien :/. En touyt cas je garde pour moi, l'autre solution :D


Message édité par Alisteroid le 21-05-2007 à 14:32:45
Reply

Marsh Posté le 21-05-2007 à 14:31:46   

Reply

Marsh Posté le 21-05-2007 à 14:37:20    

marche très bien avec IE6 ce que j'ai filé plus haut :o

Reply

Marsh Posté le 21-05-2007 à 14:38:17    

C'est ce que je dis :D

Reply

Marsh Posté le 21-05-2007 à 14:38:50    

parseInt(row.rowIndex) me rend NaN :/

Reply

Marsh Posté le 21-05-2007 à 14:44:10    

code de ta page? Parce que http://chezmoicamarche.com/
 

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>Insert Row</title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  7.     <script type="text/javascript">
  8.     function insertRow(row){
  9.       var iL = parseInt(row.rowIndex) + 1;
  10.       var tr = document.getElementById('tableau').insertRow(iL);
  11.       var td = tr.insertCell(0);
  12.       td.appendChild(document.createTextNode('index:'+tr.rowIndex));
  13.       var td2 = tr.insertCell(1);
  14.       td2.appendChild(document.createTextNode('toto'));
  15.       //en bonux je rajouterais ça:
  16.       tr.onclick = row.onclick;
  17.     }
  18.     </script>
  19. </head>
  20. <body>
  22. <table id="tableau">
  23. <tr onclick="insertRow(this)"><td>A</td><td>1</td></tr>
  24. <tr onclick="insertRow(this)"><td>B</td><td>1</td></tr>
  25. <tr onclick="insertRow(this)"><td>C</td><td>1</td></tr>
  26. <tr onclick="insertRow(this)"><td>D</td><td>1</td></tr>
  27. <tr onclick="insertRow(this)"><td>E</td><td>1</td></tr>
  28. </table>
  30. </body>
  31. </html>


Reply

Marsh Posté le 21-05-2007 à 14:51:08    

anapajari a écrit :

nan mais le inner il est violement goret faut pas faire ça !!!
C'était juste pour voir quelque chose que je l'ai laissé trainé! [:dawak]
On est censé faire du insertCell et du createTextNode pour mettre des données dedans  
 
note: j'ai par contre pas compris ton argument sur les styles :o


J'ai des styles differents suivant les lignes et les colonnes sur le style sur lequel je bosse. Donc j'ai un( des ) classes  a metrte sur le tr , et parfois une ( des ) classes a mettre sur le td  
 
pour la petite histoire, le tr sert change de couleur toutes les lignes ( classique )  
les td changent de couleur pour afficher par exemple la plus grosse valeur du tableau,  ou une valeur superieure a un seuil , ...  
 
au final , ca va quasi aussi vite avec createElement('td')

Message cité 1 fois
Reply

Marsh Posté le 21-05-2007 à 15:08:33    

Arf la galère, mon code fait 400 lignes, c'est un énrome tableau de stats, et j'avais pas vu que j'avais mis mon evennement JS sur un TD au lieu du TR :/
 
Merci énormément à vous deux :jap:

Message cité 1 fois
Reply

Marsh Posté le 21-05-2007 à 15:19:08    

flo850 a écrit :

J'ai des styles differents suivant les lignes et les colonnes sur le style sur lequel je bosse. Donc j'ai un( des ) classes  a metrte sur le tr , et parfois une ( des ) classes a mettre sur le td  
 
pour la petite histoire, le tr sert change de couleur toutes les lignes ( classique )  
les td changent de couleur pour afficher par exemple la plus grosse valeur du tableau,  ou une valeur superieure a un seuil , ...  
 
au final , ca va quasi aussi vite avec createElement('td')


Bin ça change rien du tout et ça va aussi tout court[:spamafote]
Le insertRow c'est exactement un createElement('tr') + append dans le tableau. D'ailleurs insertRow te retourne une référence sur ton obj tr avec les mêmes propriétés qu'un createElement.
Et pareil pour insertCell (createElement('td') + append).
Par contre IE a tendance à mieux tolérer le bourrinage de ligne via les insert* qu'en DOM pur.
 

Alisteroid a écrit :

Arf la galère, mon code fait 400 lignes, c'est un énrome tableau de stats, et j'avais pas vu que j'avais mis mon evennement JS sur un TD au lieu du TR :/


[:bravo]
 

Message cité 1 fois
Reply

Marsh Posté le 21-05-2007 à 15:20:27    

anapajari a écrit :

Bin ça change rien du tout et ça va aussi tout court[:spamafote]
Le insertRow c'est exactement un createElement('tr') + append dans le tableau. D'ailleurs insertRow te retourne une référence sur ton obj tr avec les mêmes propriétés qu'un createElement.
Et pareil pour insertCell (createElement('td') + append).
Par contre IE a tendance à mieux tolérer le bourrinage de ligne via les insert* qu'en DOM pur.


bon alors je me complique la vie pour rien ( en meme temps ca change pas grd chose niveau quantite de code)  
 

Reply

Marsh Posté le 21-05-2007 à 15:20:33    

Bon une toute dernière question promis juré :
Si je veux attribuer la fonction delerow à l'evenement onclick pour la nouvelle ligne comment dois je le déclarer?J'ai essayé différentes trucs sans succes.

 

En fait mon but est d'inserer une ligne lorsque je clique sur une ligne et de la supprimer lorsque je clique sur la ligne d'origine ou sur la ligne crée.

 


Message édité par Alisteroid le 21-05-2007 à 15:25:15
Reply

Marsh Posté le 21-05-2007 à 15:29:50    

au lieu de:

Code :
  1. //en bonux je rajouterais ça:
  2. tr.onclick = row.onclick;


mettre

Code :
  1. tr.onclick = function (){
  2.   this.parentNode.deleteRow(this.rowIndex);
  3. }


et lire la doc: http://developer.mozilla.org/en/do [...] .deleteRow

 

edit: et pour que ça fait pareil sur la ligne d'origine, il faut changer le handler du row "d'origine" en t'inspirant de ça


Message édité par anapajari le 21-05-2007 à 15:31:26
Reply

Marsh Posté le 21-05-2007 à 15:31:14    

[:cerveau boulay]  
 
 
 [:cerveau yamimakai]  
 
Merci de votre patience  [:cerveau atsuko]

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed