[DOM] ajout suppression de ligne dans plusieurs tableau

Invité · 27/06/2008, 14h27

bonjour, j'ai un petit soucis : j'ai un tableau qui est créer en fonction d'information récupérer en base,
une des cellules de chaque ligne de ce tableau est elle aussi un tableau, dans lequel il faut que je puisse ajouter et supprimer des lignes,

mon problèmes se trouve au niveau de la suppression des lignes, je n'arrive pas a supprimer la ligne que je veut. dans le meilleurs des cas je supprime toujours la 1er ligne. et dans le pire je n'en supprime aucune

pour la création j'utilise le hinnerHTML. et pour la suppréssion j'ai essayer de le faire avec deleteROW...

si quelqu'un pouvais essayer de m'aider

voilà mon code :

Code Jscript générer dynamiquement en fonction de la ligne du tableau :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
$i=1;
while($row= $db->fetch_array($result)){
 
echo "<script type='text/javascript'>
 
var nb$i=((15*$i)-15);
 
 
   function delRow$i(num)
  {
 
  	 document.getElementById(\"tb$i\").deleteRow(\"tr\"+num);
   nb$i--;
  }
 
   function add$i(value)
   {
   var tb = '';
//je limite à 15 lignes ajoutées par cellule   
if(nb$i<(15*$i))
   	 {
	 nb$i++;
 
  	 tb = document.getElementById(\"tb$i\").innerHTML + genLigne$i( nb$i , value );
 
  		 if( document.all )
   			{
   			 document.getElementById(\"tb$i\").outerHTML = '<table id=\"tb$i\">' + tb + '</table>';
   			}
  		 else
   			{
   			 document.getElementById(\"tb$i\").innerHTML = tb;
   			}
   	  }else{alert(\"max alias\");}
 
   }
 
   function addB$i()
   {
   var tb = '';
 
//je limite à 15 lignes ajoutées par cellule
     if(nb$i<(15*$i))
   	 {
	 nb$i++;
  	 tb = document.getElementById(\"tb$i\").innerHTML + genLigneB$i( nb$i  );
 
  		 if( document.all )
   			{
   			 document.getElementById(\"tb$i\").outerHTML = '<table id=\"tb$i\">' + tb + '</table>';
   			}
  		 else
   			{
   			 document.getElementById(\"tb$i\").innerHTML = tb;
   			}
	 }else{alert(\"max alias\");}
   }
 
   function genLigne$i( num , value)
   {
 
   return('<tr id=\"tr' + num + '\"><td><input type=\"text\" maxlength=\"15\" size=\"16\" name=' + num + ' id=' + num + ' value=\"' + value + '\"></td><td><input id=' + num + ' type=\"button\" onclick=\"delRow$i(' + num + ');\" value=\"DELL\" class=\"submit\"></td></tr>' );
 
   }
   function genLigneB$i( num  )
   {
 
   return('<tr id=\"tr' + num + '\"><td><input type=\"text\" maxlength=\"15\" size=\"16\" name=' + num + ' id=' + num + ' ></td><td><input id=' + num + ' type=\"button\" onclick=\"delRow$i(' + num + ');\" value=\"DELL\" class=\"submit\"></td></tr>' );
 
   }
 
 
</script>";

le $i est incrémenter pour chaque nouvelle ligne du premier tableau ..

Code code php ou j'appelle mes fonctions jscript :

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
 
echo"<td>";
		$result2=$db->query($sql2);
		$cpt=0;
			echo "<div id='divid$i' style='display:yes;' align='center'><a href=# onclick= ";
			while($row2= $db->fetch_array($result2)){
			echo "add$i('$row2[dns_hostname]');";
			$cpt++;
			}
			echo "visibilite('divid$i');>show alias</a></div>";
 
 
echo "<div align='center'>
			 <table id='tb$i'>";
echo "     	</table><br><input type='button' onclick=\"addB$i();\" class='submit' Value='Add'></td>";
$i++;
}
echo "</table></div>";

**Matthieu2000** · 27/06/2008, 14h36

met i en paramètre!
http://javascript.developpez.com/faq/?page=Table
fais une recherche sur getElementsByTagname et deleteROW

Invité · 27/06/2008, 14h49

je suis désolé, mais je ne comprend pas trop ce que vous voulais dire par "met i en paramètre".

j'ai d'autre page ou j'utilise des tableau "dynamique", et pour la suppréssion j'utilise une autre fonction jscript, mais elle ne fonctionne pas non plus ici :

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
 
function supp$i(x )
   {
  	 var tb = '';
 
  		 for( i=((15*$i)-15); i<=nb$i; i++ )
  		 {
 
   		 if( x != i )
    		{
    		 if( i < x )
     			{
      			j = i;
    			 }
    		 else
     			{
      			j = i - 1;
    			 }
 
 
			 tb = tb + genLigne$i( j , document.getElementById(i).value );
    		}
  		 }
 		 if( document.all )
  			 {
  			  document.getElementById(\"tb$i\").outerHTML = '<table id=\"tb$i\">' + tb + '</table>';
 			  }
	     else
  			 {
 			   document.getElementById(\"tb$i\").innerHTML = tb;
 			  }
  		 nb$i--;
   }

**Auteur** · 27/06/2008, 15h16

bonjour,

la fonction deleteRow() prend en paramètre un nombre.
outerHTML ne fonctionne pas sous FF (voir cette discussion)
pour créer, ajouter des lignes ou des cellules n'utilisez pas innerHTML
comme le suggère Matthieu voir la FAQ : http://javascript.developpez.com/faq/?page=Table
ou cet exemple : http://www.developpez.net/forums/sho...d.php?t=334611

**guy777** · 27/06/2008, 15h27

C'est quoi le but, c'est de rajouter ou supprimer dynamiquement une ligne dans un tableau ? Parce qu'il y a des fonctions javascript faite pour cela : cloneNode pour ajouter des éléments et removeChild pour les supprimer

Pour cloneNode, c'est facile il suffit de récupérer le noeud TR d'une des lignes du tableau :

Code :

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

1
2
3
4
 
maLigne = monTableau.getElementsByTagName('TR')[0];
maNouvelleLigne = maLigne.cloneNode(false); // false pour ne pas recopier les élémetns internes
monTableau.appendChild(maNouvelleLigne);

pour la suppression, même combat :

Code :

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

1
2
3
4
 
maLigneASupprimer = monTableau.getElementsByTagName('TR')[0];
parentLigne = maLigneASupprimer.offsetParent();
LigneSupprimee = parentLigne.removeChild(maLigneASupprimer);

removeChild retourne le noeud supprimé ainsi que tous les noeuds enfants, si tu souhaites les conserver pour pouvoir les traiter plus tard...

EDIT : Il faut éviter d'utiliser innerHTML pour gérer le HTML. Le DOM est là pour ça, et la gestion des noeuds est très facile : voir la doc

Invité · 27/06/2008, 16h11

j'ai trouvé la solution à mon problème,

il venait d'un souci au niveau du départ de mon for dans ma 2nd fonctions de suppression (celle sans le deleteRow...) je partait de 0 au lieu de partir de 1 ...

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
 
function supp$a(x )
   {
   	var tb = '';
//le problème venait de ce for
  		 for( i=((15*$a)-14); i<=nb$a; i++ )
  		 {
		 if( x != i )
    		{
    		 if( i < x )
     			{
      			j = i;
    			 }
    		 else
     			{
      			j = i - 1;
    			 }
 
 
			 tb = tb + genLigne$a( j , document.getElementById(i).value );
    		}
  		 }
 		 if( document.all )
  			 {
  			  document.getElementById(\"tb$a\").outerHTML = '<table id=\"tb$a\">' + tb + '</table>';
 			  }
	     else
  			 {
 			   document.getElementById(\"tb$a\").innerHTML = tb;
 			  }
  		 nb$a--;
   }

sinon pour les autres méthode de création de ligne etc, je l'ai connais mais je ne les maitrise pas, j'ai donc préférais utiliser les hinnerHTML par faute de tps pour les apprendre ...

voilà sinon mon code fonctionne parfaitement à présent merci d'avoir pris le temps de regarder quand même

**guy777** · 27/06/2008, 16h18

sinon pour les autres méthode de création de ligne etc, je l'ai connais mais je ne les maitrise pas, j'ai donc préférais utiliser les hinnerHTML par faute de tps pour les apprendre ...

Franchement, ce sont des fonctions simples à comprendre. Je te conseille vivement de les découvrir, c'est puissant, facile à manier et on peut faire des trucs très sympa avec et surtout rapidement !