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: