Supprimer la ligne courante d'un tableau

Version imprimable

31/07/2008, 09h21
SweetLeaf

Supprimer la ligne courante d'un tableau

Bonjour !
J'aimerais savoir si il existe un moyen de récupéré le numéro de la ligne d'un tableau pour la supprimer a l'aide de deleteRow() ??
Merci d'avance !!
31/07/2008, 09h42
SweetLeaf

Je viens de trouver

Code:

rowIndex / sectionRowIndex

mais ça ne fonctionne pas...:(

J'avais aussi pensé a un truc du genre

Code:

currentRow()

mais je ne sais pas si ça existe...:?
Quelqu'un aurait-il une idée ??
31/07/2008, 09h54
SweetLeaf

est-ce que

Code:

deleteRow(document.getElementById('tr'+(i-1)).rowIndex)

va suprimer la ligne qui a l'id : 'tr'+(i-1) ???
31/07/2008, 10h04
SweetLeaf

Je vient de tester... aucun résultat...:cry:
J'vais faire un tour dans mes bouquins !
31/07/2008, 10h06
SpaceFrog

tu veux la supprimer sur quel evènement ? le click direct sur la ligne ? ou sur un bouton dans la ligne ... ?

si ou c'est super simple...
31/07/2008, 10h09
SweetLeaf

J'ai une petite icône avec un évènement onClick qui fait appel a une fonction dans laquelle je supprime la ligne mais je n'arrive pas a récupéré le numéro de la ligne sur laquelle je clique...
31/07/2008, 10h14
SpaceFrog

l'icone est dans la ligne ???

tu as le code html d'une ligne que je puisse voir la structure ?

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
 
<tr>
<td><img src="img/action_delete.png" id="del0"></td>
<td><textarea rows="2" cols="25" id="libelle0">Logiciel de Comptabilité APISOFT Expert Version PME 2/5 postes</textarea></td>
<td><img src="img/maximize.png" id="image0"></td>
<td><select id="type0" style="width: 100%;">
<option value="Logiciel">Logiciel</option>
<option value="Formation">Formation</option>
<option value="Option">Option</option>
<option value="Abonement">Abonement</option>
</select></td>
<td>
<input class="LiDevis" size="1" id="Qte0"></td>
<td><input class="LiDevis" size="5" id="PUHTB0" style="width: 100%;"></td>
<td><input class="LiDevis" size="2" id="RemArt0" style="width: 100%;"></td>
<td><input disabled="disabled" class="LiDevis" size="5" id="PUHTR0" style="width: 100%;"></td>
<td><input disabled="disabled" class="LiDevis" size="2" id="THT0" style="width: 100%;"></td>
<td><select id="TVA0">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select></td>
</tr>
<tr style="display: none;" id="ligne0">
<td colspan="10"><textarea></textarea></td></tr>

Avec l'icône je veut suprimer c'est deux lignes.

31/07/2008, 10h24
SpaceFrog

Code:

onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)"
31/07/2008, 10h26
E.Bzz

Avec un parentNode de moins dans la parenthèse, non ?

A+
31/07/2008, 10h30
SpaceFrog

Exact, je pensais l'avoir supprimé ...

c'est chose faite ... !! code corrigé

ok merci le souci c que je crée ces ligne via DOM donc pour l'icône j'ai :
Code:

1 2 3 4 5 6 7 BaliseLigne.appendChild(BaliseCols); BaliseImageDel.id='del'+(i-1); BaliseImageDel.src = "img/action_delete.png"; BaliseImageDel.onclick = function() { suppression(BaliseImageDel.id.charAt(BaliseImageDel.id.length-1),tabArticle); } BaliseCols.appendChild(BaliseImageDel);
donc faut que je mette ce code dans ma fonction suppression() ?? ou je peut le mettre avant l'appel de ma fonction suppression ??

Code:

1
2
3
4
5
6
7
BaliseLigne.appendChild(BaliseCols);
          BaliseImageDel.id='del'+(i-1);
          BaliseImageDel.src = "img/action_delete.png";
          BaliseImageDel.onclick = function() {
 this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
          }
        BaliseCols.appendChild(BaliseImageDel);

Impeccable ça marche nickel !! :king:
Merci a vous !!!

code final :

Code:

1
2
3
4
5
6
7
8
BaliseLigne.appendChild(BaliseCols);
          BaliseImageDel.id='del'+(i-1);
          BaliseImageDel.src = "img/action_delete.png";
          BaliseImageDel.onclick = function() {
          this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
          suppression(BaliseImageDel.id.charAt(BaliseImageDel.id.length-1),tabArticle);
          }
        BaliseCols.appendChild(BaliseImageDel);

A la prochaine !! :mouarf:

31/07/2008, 10h36
SweetLeaf

C 'est ptet pas fini on dirait !! Je vérifie mais je crois qu'il y a un problème !!
31/07/2008, 10h36
SpaceFrog

tu pourrais aussi le gérer dans la fonction en passant this en paramètre ...
le code en sera un peu mois volumineux
31/07/2008, 10h39
SweetLeaf

c'est bien ce que je redoutais...il me reste :

Code:

<tr style="display: none;" id="ligne1"><td colspan="10"><textarea></textarea></td></tr>

Comment je peut modifier ce que tu ma donner pour supprimer cette ligne aussi ?
Sachant qu'elle est caché...:?

oui je pense que je vais passer en paramètre ça sera mieux !!
31/07/2008, 10h54
E.Bzz

Citation:

Envoyé par SweetLeaf

Comment je peut modifier ce que tu ma donner pour supprimer cette ligne aussi ?
Sachant qu'elle est caché...:?

oui je pense que je vais passer en paramètre ça sera mieux !!

Mais ça ne changera pas le problème de la dernière ligne : il faut ajouter à ta fonction un test : si le nombre de ligne = 1, tu forces la suppression de la dernière ...

A+
31/07/2008, 10h56
SpaceFrog

ou passe par un nommage rationnel avec les id ...

si tu supprime id_n supprimes aussi id_n+1
là il suffit de passer this.id en param à la fonction
31/07/2008, 10h58
SweetLeaf

ouai c'est une bonne idée !!! je test !!!

Mais il me semble que j'avais deja tester et ça me supprimer pas non plus la ligne caché.... ma la ligne non caché suivante !

Euh... avec l'id... j'utilise toujours removeChild ??
31/07/2008, 11h16
SweetLeaf

je doit avouer que là je suis bloquer je ne sais pas très bien comment marche le removeChild de plus je ne sait pas ou mettre mon getElementById...:oops:
Un petit indice ??
31/07/2008, 11h35
SpaceFrog

Code:

document.getElementById('iddutableau').removeChild(document.getElementById('iddelaligne')
31/07/2008, 11h46
SweetLeaf

impeccable !! je regarde si j'arrive a sen supprimer plusieurs !!
Merci beaucoup pour ton aide !! :king:
31/07/2008, 12h01
SweetLeaf

euh je n'arrive pas a supprimer la ligne d'après... je vais manger je regarde ca vers 14h !
Ciao bon app à tous !!! ;)

parse le premier id pour appeler le suivant ou passe les deux id dans la fonction
le plus simple etant de ne passer que la partie integer de l'id ...
Code:

1 2 3 4 5 6 7 function deletetruc(.....,kill){ document.getElementsByTagName('table')[0].removeChild(document.getElementById('identifiant'+kill)) document.getElementsByTagName('table')[0].removeChild(document.getElementById('identifiant'+(kill+1)) }

31/07/2008, 14h01
SweetLeaf

oui c'est ce que j'ai fait. là je test getElementByTagName pour voir ce que ca donne !!
31/07/2008, 14h11
SpaceFrog

fait peter le code ...

euh j'ai beau faire :

Code:

alert(document.getElementsByTagName('table')[3].id);

et quelques soit le chiffre il ne m'affiche rien...(je suis allez de 0 a 10....)
j'ai fait une bêtise ?? ::oops:

ok voila le code :

Code:

1
2
3
4
5
6
7
8
9
BaliseLigne.appendChild(BaliseCols);
          BaliseImageDel.id='del'+(i-1);
          BaliseImageDel.src = "img/action_delete.png";
          BaliseLigne.id = 'ligne'+(i-1);
          BaliseImageDel.onclick = function() {
 
          suppression(BaliseImageDel.id.charAt(BaliseImageDel.id.length-1),tabArticle);
          }
        BaliseCols.appendChild(BaliseImageDel);

et la fonction :

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
function suppression(un_nb,un_tableau)
{
  for(j=0;j<=10;j++)
  {
  alert(document.getElementsByTagName('table')[j].id);
  }
  y = un_nb*1 + 1;
  delArticle(un_nb,un_tableau);
  //ligne.parentNode.parentNode.parentNode.removeChild(document.getElemenById('tr'+num));
  document.getElementsByTagName('table')[3].removeChild(document.getElementById('ligne'+un_nb));
  document.getElementsByTagName('table')[3].removeChild(document.getElementById('ligne2'+y));
  //ligne.parentNode.parentNode
 
  i=un_tableau.length+1;
 
  if(y != i)
  {
    for(x=y; x<i; x++)
    {
      document.getElementById('ligne'+x).id = 'ligne'+(x-1);
      document.getElementById('del'+x).id = 'del'+(x-1);
      document.getElementById('libelle'+x).id = 'libelle'+(x-1);
      document.getElementById('image'+x).id= 'image'+(x-1);
      document.getElementById('type'+x).id= 'type'+(x-1);
      document.getElementById('Qte'+x).id= 'Qte'+(x-1);
      document.getElementById('PUHTB'+x).id= 'PUHTB'+(x-1);
      document.getElementById('RemArt'+x).id= 'RemArt'+(x-1);
      document.getElementById('PUHTR'+x).id= 'PUHTR'+(x-1);
      document.getElementById('THT'+x).id= 'THT'+(x-1);
      document.getElementById('TVA'+x).id= 'libelle'+(x-1);
      document.getElementById('ligne2'+x).id = 'ligne2'+(x-1);
      document.getElementById('area'+x).id = 'area'+(x-1);
    }
  }
}

Code:

1
2
3
4
5
6
7
8
BaliseLigne.appendChild(BaliseCols);
          BaliseImageDel.id='del'+(i-1);
          BaliseImageDel.src = "img/action_delete.png";
          BaliseImageDel.onclick = function() {
          deletelines(this.parentNode.parentNode.id)
          suppression(BaliseImageDel.id.charAt(BaliseImageDel.id.length-1),tabArticle);
          }
        BaliseCols.appendChild(BaliseImageDel);

puisune fonction SEPAREE

Code:

1
2
3
4
5
6
function deletelines(NumId){
Obj1=document.getElemetnById('debuid'+Obj);
Obj2=document.getElemetnById('debuid'+(Obj+1));
document.getElementById('idtable').removeChild(Obj1)
document.getElementById('idtable').removeChild(Obj2)
}

Citation:

Envoyé par SpaceFrog

puisune fonction SEPAREE

Code:

1
2
3
4
5
6
function deletelines(NumId){
Obj1=document.getElemetnById('debuid'+Obj);
Obj2=document.getElemetnById('debuid'+(Obj+1));
document.getElementById('idtable').removeChild(Obj1)
document.getElementById('idtable').removeChild(Obj2)
}

il te sert a koi ton paramètre ? faut l'utiliser là ?? 8-)

Code:

1
2
Obj1=document.getElemetnById('debuid'+NumId);
Obj2=document.getElemetnById('debuid'+(NumId+1));

31/07/2008, 14h47
SpaceFrog

Ben tu vois quand tu veux ....

merci !! jme sens un peut moins nul !! :lol: mais je croi qu'il y a un problème avec :
Code:

1 2 3 4 5 6 7 function deletelines(NumId){ alert(NumId); Obj1=document.getElemetnById('ligne'+NumId); Obj2=document.getElemetnById('ligne2'+NumId); document.getElementById('Tab').removeChild(Obj1) document.getElementById('Tab').removeChild(Obj2) }
car il ne va pas dans la fonction suivante.. :?
Pourtant le code a l'air bon... I don't understand !!! :arf:

edit: euh je n'arrive plus a ecrire un msg... normal ?? (ca me disait chemin non valide etc.)
euh le return true est sensé faire quoi ?

ajoute un return true à la fin ?

et un ; là

Code:

1
2
3
4
5
6
7
BaliseLigne.appendChild(BaliseCols);
          BaliseImageDel.id='del'+(i-1);
          BaliseImageDel.src = "img/action_delete.png";
          BaliseImageDel.onclick = function() {
          deletelines(this.parentNode.parentNode.id);
          suppression(BaliseImageDel.id.charAt(BaliseImageDel.id.length-1),tabArticle);
          }

31/07/2008, 14h55
SweetLeaf

ah ben c bon c parce que tu était en train d'éditer je pense.

Pour le ; c'est déjà fait ^^ par contre pour le return... c'est sensé faire quoi ??
31/07/2008, 15h08
SweetLeaf

Si le return c pour faire croire que la fonction a marcher ... ben apparement il ne va même pas jusqu'au return.
Jvais faire plusieur alert pour voir ou ca plante !
31/07/2008, 15h12
SweetLeaf

c bon ça marche en fait il y avais une faute de frappe c'était elemetn au lieu de element !! quel noob je suis :oops::oops:

Par contre je n'ai pas l'impression qu"il supprime la ligne caché.. je vais vérifier et je te dis quoi !
31/07/2008, 15h19
SweetLeaf

C'est bon !!! Impeccable je me disait aussi si ce code il marche pas... il n'y a aucun code qui va marcher !! :mrgreen:
En fait, là l'espace que l'on peut distingué c'est l'espace entre les lignes effacé qui est rester alors j'ai enlevé le cellspacing et le cellpadding en plus ça fait plus joli !! tout bénef !! :yaisse2:
En tout cas merci a toi et a ta patiente !!! :king:
Ciao !!