Suppression de lignes rajoutées (DOM) [Résolu]

[ju0123456789]

Bonjour,

Tout d'abord désolé si je ne suis pas dans le bon sujet.
Ensuite, J'ai un tableau par défaut avec 3 lignes. J'ai créé un bouton qui en créé 2 (car la derniere cellule est fusionnée).

Tout marche bien, sauf quand j'essaye d'en supprimer, je galère je n'y arrive pas.
Voici mon code HTML du tableau :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table id="MyTAB">
            <tr>
              <td>Code Produit</td>
              <td>D&eacute;signation</td>
              <td>Facturable</td>
            </tr>
            <tr style="background-color:#ddd;">
              <td> </td>
              <td> </td>
              <td rowspan="2"</td>
            </tr>
            <tr >
              <td></td>
              <td> </td>
            </tr>
          </table>

Mon bouton pour rajouter mes 2 lignes :

Code :

<input type="button" onclick="javascript:AddRow('MyTAB','0');" value="+" style="font-size:28px;font-weight:bolder;font-family:verdana;" title="Rajouter une ligne" />

Et voici maintenant mon code pour rajouter 2 lignes à chaque clic sur le bouton :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function AddRow( tableau, Indice )
{
  Indice++;
  var Ligne = 1; 
  var NbLigneMax = 2 
  tableau = document.getElementById(tableau);
  var tds = tableau.getElementsByTagName('tr')[0].getElementsByTagName('td').length;
  do	
  {
    var tr = document.createElement('tr');
    if( Ligne == 1 ) tr.style.backgroundColor = "#dddddd";
    for(var i = 1; i<= tds; i++)
    {
      if( Ligne == 1 && i == tds )
      {
 
        var td = document.createElement('td');
        td.rowSpan = "2";
        tr.appendChild(td);
      }
      else if( Ligne == 2 && i == tds )
      {
        // Si c'est la derniere cellule de la derniere ligne rajoutée on ne la déclare pas car elle a été fusionnée avec la derniere celulle de la premiere ligne
      }
      else
      {
        var td = document.createElement('td');
        tr.appendChild(td);
      }
    }
    if(tableau.firstChild.tagName == 'tbody') tableau.firstChild.appendChild(tr);
    else tableau.appendChild(tr);
    Ligne++;
  }
  while( Ligne <= NbLigneMax ) 
}

Je voudrais supprimer donc ces 2 dernieres lignes ajoutées, mais pas celles déjà contenues dans le HTML, uniquement celles que j'ai générées.
J'ai testé ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
function DelRow( tableau, NbLignes ) // Renseigner l'ID du tableau
{
  var Indice = 0;
  var tr = document.getElementsByTagName('tr');
  do
  {
    document.getElementById( tableau ).deleteRow( -1 ); // On supprime la derniere ligne du tableau : parametre -1 de la fonction deleteRow()
    Indice+= 1;
  }
  while( Indice < 2); // On boucle 2 fois
}

Mais ça me fait exactement l'inverse de ce que je souhaite : ça supprime les lignes que je n'ai pas rajoutés grace à ma fonction JS
Quelqu'un peut m'aider svp ?
Merci

Ju'

[NoSmoking]

Bonsoir,
pas mal d'erreur dans ce que je viens de lire

Code :

1
2
function AddRow( tableau, Indice ){
  Indice++;

indice passé en argument et incrémenté n'est visible qu'à l'intérieur de la fonction AddRow, ou tu ne l'utilises même pas.

- Pourquoi ne pas utiliser les méthode inserCell, deleteCell, insertRow, deleteRow
- Pourquoi ne pas utiliser les collections rows des TABLEs et cells des TRs

Tu peux même utiliser la méthode cloneNode...

Je pense que tu y verrais plus clair

[ju0123456789]

Bonjour et merci de ta réponse !

Oui effectivement l'indice ne servait a rien je n'avais pas fait attention lors de mes dernieres modifs. J'en avais besoin au début car je génère des input (que j'ai enlevé volontairement pour vous présenter mon code, plus facile a lire pour vous) avec des ID mais en fait j'avais trouvé autre chose.

Cela dit dans l'ajout de lignes tout marche très bien. Je débute un manipulation d'objets DOM et j'avoue que je galère.
En fait il faudrait simplement que je récupère la dernière ligne du tableau et que je la supprime grâce, effectivement, à deleteRow. Mais, comment récupérer cette dernière ligne ?

Merci

[Auteur]

bonjour,


j'ai vu dans ton script des var td= et var tr=. Je te conseille d'éviter les variables avec un nom de balise HTML tu pourrais avoir de mauvaises surprises

Ensuite j'ai remarqué un

Code :

tableau = document.getElementById(tableau);

le paramètre tableau de document.getElementById() est différent du type d'objet retourné par la fonction. Donc, il faut créer une nouvelle variable :

Code :

var objetTableau = document.getElementById(tableau);

Toujours dans les variables : il y a une chose dont j'ai horreur, qui me donnent des boutons c'est la déclaration de variables au milieu du code a fortiori dans des boucles !!!! Donc tu me sors ces déclarations de variables des boucles et tu me les mets au début de ta fonction !!


Tu trouveras ici : http://www.developpez.net/forums/d33...u/#post2057900
un script complet d'ajout et suppression de lignes dans une table

[NoSmoking]

ton soucis vient de ces lignes

Code :

1
2
3
4
if(tableau.firstChild.tagName == 'tbody')
  tableau.firstChild.appendChild(tr);
else
  tableau.appendChild(tr);

mets un alert( tableau.firstChild.tagName) juste devant tu te rendras compte de l'erreur.

[ju0123456789]

Bonjour !

Merci Auteur pour le lien, mais j'aimerais bien trouver et surtout comprendre mon problème, surtout que je ne suis pas un grand fan du innerHTML. Effectivement la déclaration de mes variables a été faite à l'arrache, j'ai modifié merci de la remarque

NoSmoking, oui effectivement il me génère tout le temps un TBODY au lieu de me générer un TR c'est surement pour cela que je n'arrive pas a supprimer mes lignes. C'est IE qui me génère ça automatiquement, chrome me met "undefined" ... ça devrait être "tr" ... je comprends pas trop

Voici le code complet de ma fonction d'ajout :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
function AddRow( tableau ) // Renseigner l'ID du tableau
{
  var ID;
  var Ligne = 1; // Ligne = 1 : 1ere Ligne avec derneire cellule fusionnee | Ligne = 2 : 2e ligne sans declarer derniere cellule (car fusionne en ligne 1)
  var objetTableau = document.getElementById(tableau);
  var input, td, tr, i;
  //Calcul du nombre de cellule par ligne dans le tableau -> on regarde combien il y a de td dans le premier tr
  var tds = objetTableau.getElementsByTagName('tr')[0].getElementsByTagName('td').length;
  do	
  {
    tr = document.createElement('tr'); //On créé une ligne
    tr.className = "Height Left Border";
    tr.vAlign = "middle";
    if( Ligne == 1 ) tr.style.backgroundColor = "#dddddd";
    //On ajoute autant les cellules
    for(i = 1; i<= tds; i++)
    {
      if( Ligne == 1 && i == tds )
      {
        // Si c'est la derniere cellule de la premiere ligne rajoutée, on la fusionne avec le derniere cellule de la 2e ligne
        td = document.createElement('td');
        input = document.createElement('input');
        input.type = "checkbox";
        input.id = Compteur( "fact", 0 );
        input.name = ID + "[]";
        td.rowSpan = "2";
        td.className = "Center";
        tr.appendChild(td);
        td.appendChild(input);
      }
      else if( Ligne == 2 && i == tds )
      {
        // Si c'est la derniere cellule de la derniere ligne rajoutée on ne la déclare pas car elle a été fusionnée avec la derniere celulle de la premiere ligne
      }
      else
      {
        if( Ligne == 1 )
        {
          switch( i )
          {
            case 1 : ID = "cp_old";
                     break;
            case 2 : ID = "des_old";
                     break;
          }
		}
        else
        {
          switch( i )
          {
            case 1 : ID = "cp_new";
                     break;
            case 2 : ID = "des_new";
                     break;
          }
		}
        // Cas normal, on ajout la cellule à la ligne
        td = document.createElement('td');
        input = document.createElement('input');
        input.type = "text";
        input.id = Compteur( ID, 0 );
        input.name = ID + "[]";
        tr.appendChild(td);
        td.appendChild(input);
        input.className = "ReadOnly";
        input.style.width = "98%";
        if( Ligne == 1 ) input.style.backgroundColor = "#dddddd";
      }
      //Si on veut mettre du contenu dans la cellule créée, ça se passe ici (sinon il suffit de supprimer cette ligne)
    }
    objetTableau.appendChild(tr);
    Ligne++; // On incremente la ligne pour passer a la suivante
  }
  while( Ligne <= 2 ) // Tant que le nombre de ligne de depasse pas le nombre de ligne maximum, qui, dans mon cas, est égal à 2
}

Donc c'est ma ligne objetTableau.appendChild(tr); qui ne va pas ?

[Auteur]

Envoyé par ju0123456789

Merci Auteur pour le lien, mais j'aimerais bien trouver et surtout comprendre mon problème, surtout que je ne suis pas un grand fan du innerHTML.

justement dans le code en question il n'y a pas de innertHTML. D'ailleurs je te le déconseille vivement (le innerHTML ) pour ajouter des cellules dans ta table.

[NoSmoking]

Envoyé par ju0123456789

Donc c'est ma ligne objetTableau.appendChild(tr); qui ne va pas ?

effectivement sur IE il faut ajouter la TR sur TBODY alors que les autres, laxistes sur ce coup, autorise l'ajout directement sur la TABLE.

Il est donc préférable de passer par insertRow, qui lui prend en charge les spécificités des navigateurs.

Tu peux bien sûr récupérer le TBODY et lui ajouter la TR

Code :

1
2
var oBody = oTable.getElementsByTagName('TBODY')[0];
oBody.appendChild( oTr);

[ju0123456789]

Merci pour toutes ces aides précieuses, ça a résolu mon probleme ! =)

Bonne fin de journée

Ju'