deleteRow() d'une table Javascript et index

**SPACHFR** · 01/09/2009, 12h40

Bonjour,

Je continue sur les tables JavaScript.....
J'ai fais une fonction de "delete" de row d'une table, dans laquelle seul les lignes ayant un checkbox checked sont supprimées.
Grâce à la méthode 'deleteRow()' aucun problème.

Cependant chaqu'une des checkBox à un Id généré lors de la construction de la table. Cet Id est :
'chk'+n
ou n est le numéro de la ligne en cours (chk0, chk1, chk2, etc...)
La fonction de delete fonctionne bien la première fois mais ensuite l'index de la ligne ne correspond plus à l'Id du checkBox.
La conséquence est que lors du getElementById() de la checkbox celle-ci n'existe plus dans certain cas et j'obtiens une erreur.

Existe t-il une manière alternative de procéder sans passer par l'Id du checkBox ?

Merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 function DelEvent() {
  var TabRows = document.getElementById('EventTable').rows.length;
  var Tab = document.getElementById('EventTable');
  var ChkId = '';
 for (var i=0;i<TabRows;i++) {
   ChkId = 'chk'+i;
    if (document.getElementById(ChkId).checked) {
	 Tab.deleteRow(i);
    }
  }
 }

**franculo_caoulene** · 01/09/2009, 12h44

Salut,

Fait une boucle à l'envers!

**SPACHFR** · 01/09/2009, 12h49

Merci pour cette réponse.

A l'envers (?) désolé mais je comprend pas

**franculo_caoulene** · 01/09/2009, 12h55

Au lieu de partir de zéro et d'incrémenter, pars de la taille du tableau et décrémente. Ainsi les index restent les mêmes.

**SPACHFR** · 01/09/2009, 13h06

J'ai testé, mais j'ai le même problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
for (var i=TabRows-1;i>0;i--) {

Cela fonctionne uniquement si je supprime les dernières lignes.
Mais si je supprime un ligne dans le milieu du tableau, ensuite lorsque je rappel la fonction de delete l'Id de la checkBox ne correspond plus au numéro de ligne du tableau.

J'ai bien pensé à ré-indexer les Id des CheckBox, mais le tableau peux avoir plus de 1000 lignes, et j'ai peur que cela ne soit vraiment pas performant.

**andry.aime** · 01/09/2009, 13h12

Salut,
Teste d'abord si le checkbox existe encore avant de faire la suppression.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function DelEvent() {
  var TabRows = document.getElementById('EventTable').rows.length;
  var Tab = document.getElementById('EventTable');
  var ChkId = '';
 for (var i=0;i<TabRows;i++) {
   ChkId = 'chk'+i;
    if (document.getElementById(ChkId) && document.getElementById(ChkId).checked) {
	 Tab.deleteRow(i);
    }
  }
 }

**franculo_caoulene** · 01/09/2009, 13h27

En effet, j'avais sauté cette étape, désolé.

Je ne ferais pas comme ça. Je définirais un attribut name commun aux cases à cocher. Ensuite il y a deux possibilités. Soit ces cases à cocher ont pour valeur l'id de la ligne à supprimer. Soit tu parcours le DOM jusqu'à la ligne pour la supprimer.

Je préfère la seconde solution qui n'a aucun lien avec une quelconque valeur "dynamique" dans le document.

**SPACHFR** · 01/09/2009, 14h23

Merci à vous pour ces réponses.

Je n'y arrive pas mieux.
Voici un petit exemple du code
Les lignes supprimées à l'exception de la première cochée ne sont plus les bonnes....

En fait le problème est que si j'ai un Id = chk3 pour une checkbox est qu'il ne reste que 2 lignes dans la table, cet Id n'est jamais testé.
Mon problème est de corréler le numéro de ligne est l'Id de la checkBox.
Peut être un tableau ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<html>
<head>
<script type="text/javascript">
var a=0;
function tst() {
  if ( !document.getElementById('EventTable')) {
	var MyTab = document.createElement('table');
	MyTab.style.backgroundColor ="red";
	MyTab.border="4";
	MyTab.width="150px";
	MyTab.id ="EventTable";
	var tr = MyTab.insertRow(-1);
	var td = tr.insertCell(0);
	td.innerHTML='<input type="checkbox" id="chk'+a+'" onclick="alert(this.id);"/>';
	td = tr.insertCell(1);
	td.innerHTML='chk'+a;
	document.getElementById('d2').appendChild(MyTab);
   }
}
function AddRow() {
 if ( document.getElementById('EventTable')) {
	var newRow = document.getElementById('EventTable').insertRow(-1);
    var newCell = newRow.insertCell(0);
	a++;
    newCell.innerHTML = '<input type="checkbox" id="chk'+a+'" onclick="alert(this.id);"/>';
    newCell = newRow.insertCell(1);
    newCell.innerHTML = 'chk'+a;
   }
}
function DelRow() {
 var TabRows = document.getElementById('EventTable').rows.length;
 var Tab = document.getElementById('EventTable');
 var ChkId = '';
 for (var i=0;i<TabRows;i++) {
  ChkId = 'chk'+i;
  if (document.getElementById(ChkId) && document.getElementById(ChkId).checked) {
	Tab.deleteRow(i);
  }
 }
}
 
</script>
</head>
<body>
<div id="d1">
<input type="button" value="AddTable" onclick="tst();"/>
<input type="button" value="AddRow" onclick="AddRow();"/>
<input type="button" value="DelRow" onclick="DelRow();"/>
</div>
<div id="d2">
</div>
</body>
</html>

**SPACHFR** · 01/09/2009, 14h56

J'ai trouvé une solution

Je ne sais pas si elle est parfaite mais elle fonctionne.
J'aimerai bien votre avis.

Reste que lorsque je sélectionne plusieurs lignes à supprimer elles ne le sont pas toute (??)

Pour chaque cellule contenant une checkbox, j'ai attribué un Id à cette cellule (en plus de l'Id de la Checkbox)

Id de la cellule : 'cel'+a; (ou 'a' est l'incrementé lors de chaque creation de ligne)

Id du checkBox :'chk'+a; ('a' idem )

Puis la fonction de delete de Row

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function DelRow() {
 var TabRows = document.getElementById('EventTable').rows.length;
 var Tab = document.getElementById('EventTable');
 var ChkId = '';
 for (var i=0;i<TabRows;i++) {
     var oCells = Tab.rows.item(i).cells;
     MyCelId = oCells.item(0).id;
     ChkId = 'chk'+MyCelId.substring(3,MyCelId.length);
     if (document.getElementById(ChkId) && document.getElementById(ChkId).checked) {
	Tab.deleteRow(i);
     }
  }
}

**franculo_caoulene** · 01/09/2009, 15h00

Ce que je t'ai prospoé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
<head>
<script type="text/javascript">
function tst() {
  if ( !document.getElementById('EventTable')) {
    var MyTab = document.createElement('table');
    MyTab.style.backgroundColor ="red";
    MyTab.border="4";
    MyTab.width="150px";
    MyTab.id ="EventTable";
    var tr = MyTab.insertRow(-1);
    createCell(tr, 0);
    document.getElementById('d2').appendChild(MyTab);
  }
}
function AddRow() {
  if ( document.getElementById('EventTable')) {
    var newRow = document.getElementById('EventTable').insertRow(-1);
    var newCell = newRow.insertCell(0);
    createCell(newRow, 0);
  }
}
function DelRow() {
  var Tab = document.getElementById('EventTable');
  var checkbox = document.getElementsByName("del");
  for (var i=checkbox.length-1;i>=0;i--) {
    if (checkbox[i].checked) {
      Tab.deleteRow(checkbox[i].parentNode.parentNode.rowIndex);
    }
  }
}
 
function createCell(tr, i) {
  var td = tr.insertCell(i);
  var input=document.createElement("input");
  input.type="checkbox";
  input.name="del";
  input.value="1";
  td.appendChild(input);
}
 
</script>
</head>
<body>
<div id="d1">
  <input type="button" value="AddTable" onclick="tst();"/>
  <input type="button" value="AddRow" onclick="AddRow();"/>
  <input type="button" value="DelRow" onclick="DelRow();"/>
</div>
<div id="d2"></div>
</body>
</html>

Ce que tu a fait est ce que j'ai proposé plus haut, mais je n'aime pas cette façon de faire. je préfère parcourir le DOM.

**SPACHFR** · 01/09/2009, 15h06

Pourrais tu m'expliquer ce que tu entends par parcourir le DOM.
(je débute en JS, et je me forme seul. J'ai donc pas mal de lacunes que j'essaie de combler au fur et a mesure des problèmes que je rencontre).

J'ai testé ton code pas de doute il fonction. Par contre il y a pas mal de notation que j'ai du mal à comprendre
ex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Tab.deleteRow(checkbox[i].parentNode.parentNode.rowIndex);

merci

Ma fonction n'est pas parfaite, car lorsque j'ai plusieurs lignes à supprimer elles ne le sont pas toutes (???)

**franculo_caoulene** · 01/09/2009, 15h16

Le DOM est un objet représentant le document. Il a ses propriétés et ses méthodes comme getElementById, par exemple qui n'est en fait pas du javascript à proprement parler. Le document est représenté par un arbre comprenant des nœuds (les éléments HTML). Dans notre cas, la case à cocher est descendant de la ligne du tableau :

document -> body -> table -> tr -> td -> input

Donc plutôt que d'identifier la ligne du tableau pour la retrouver par la suite, tu peux remonter la branche depuis la case à cocher jusqu'à la ligne du table :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Tab.deleteRow(checkbox[i].parentNode.parentNode.rowIndex);

Ceci veut dire : "je supprime une ligne de tableau (Tab.deleteRow) à l'indice (rowIndex) du grand père (checkbox[ i].parentNode.parenNode) de la case à cocher" .

**SPACHFR** · 01/09/2009, 15h34

Si j'ai bien compris : (même si le raisonnement et impropre)

Dans l'absolu la syntaxe suivante supprimerai la table

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Tab.deleteRow(checkbox[i].parentNode.parentNode.parentNode.rowIndex);

**SPACHFR** · 01/09/2009, 16h17

La fonction de delete de Row() ne fonctionne pas avec IE7
J'ai testé la variable checkbox.length elle est à 0 sous IE7 (???).

Du coup on passe jamais dans la boucle

**franculo_caoulene** · 01/09/2009, 18h17

Je n'ai plus d'IE7 sous la main, mais deleteRow fonctionne bien sous IE7 logiquement : http://www.webdevout.net/browser-sup...mltableelement
getElementsByName créer une HTMLCollection fonctionnant correctement sous IE7 : http://www.webdevout.net/browser-sup...htmlcollection
Apparemment IE7 a un bug sur getElementsByName qui ne devrait pas te concerner : http://www.webdevout.net/browser-sup...l-htmldocument

**SPACHFR** · 01/09/2009, 18h31

J'ai trouvé

En fait IE7 n'aime pas la déclaration suivante:
Je ne sais pas pourquoi, mais aucune erreur de remontée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
input.name="del";

J'ai essayé en remettant directement la déclaration du checkbox dans le innHTML de la cellule en conservant l'idée du "name" et ça fonctionne ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
newCell.innerHTML = '<input type="checkbox" name="del"/>';

Encore un grand

à tous ceux qui ont pris de leurs temps pour partager leurs savoir et m'aider

MERCI.

Ps: étape suivante le tri du tableau.....

**franculo_caoulene** · 02/09/2009, 09h52

Un tag [Résolu] alors?

**andry.aime** · 02/09/2009, 13h09

étape suivante le tri du tableau.

Rendre les tables HTML triables

**SPACHFR** · 04/09/2009, 10h13

Merci andry.aime pour ce lien

deleteRow() d'une table Javascript et index

JavaScript

Discussions similaires

Partager

Partager