deleteRow() d'une table Javascript et index

Version imprimable

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:

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); } } }

01/09/2009, 12h44
franculo_caoulene

Salut,

Fait une boucle à l'envers!
01/09/2009, 12h49
SPACHFR

Merci pour cette réponse.

A l'envers (?) désolé mais je comprend pas
01/09/2009, 12h55
franculo_caoulene

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.
01/09/2009, 13h06
SPACHFR
J'ai testé, mais j'ai le même problème.
Code:

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.

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

Code:

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);
    }
  }
 }

01/09/2009, 13h27
franculo_caoulene

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.

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:

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>

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:

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); } } }

Ce que je t'ai prospoé :

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
<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.

01/09/2009, 15h06
SPACHFR
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:

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 (???)
01/09/2009, 15h16
franculo_caoulene

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 :

Citation:

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:

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" .
01/09/2009, 15h34
SPACHFR
Si j'ai bien compris : (même si le raisonnement et impropre)

Dans l'absolu la syntaxe suivante supprimerai la table 8O
Code:

1 2 Tab.deleteRow(checkbox[i].parentNode.parentNode.parentNode.rowIndex);
01/09/2009, 16h17
SPACHFR

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
01/09/2009, 18h17
franculo_caoulene

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
01/09/2009, 18h31
SPACHFR
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:

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:

1 2 newCell.innerHTML = '<input type="checkbox" name="del"/>';
Encore un grand :merci: à tous ceux qui ont pris de leurs temps pour partager leurs savoir et m'aider

MERCI.

Ps: étape suivante le tri du tableau.....:?
02/09/2009, 09h52
franculo_caoulene

Un tag [Résolu] alors?
02/09/2009, 13h09
andry.aime

Citation:

étape suivante le tri du tableau.

:fleche: Rendre les tables HTML triables
04/09/2009, 10h13
SPACHFR

Merci andry.aime pour ce lien :ccool: