suppression des lignes d'une table

**billyrose** · 24/06/2009, 13h42

Bonjour a tous,

Finalemen je peux creer dynamiquement les lignes d'une table.

mon code JS + php est le suivant:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script>
   function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox and others
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest not supported by your browser
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
			/**
			*  method called when the user clicks on the button
			*/
			function go(){
				var xhr = getXhr()
				// We defined what we gonna do with the response
				xhr.onreadystatechange = function(){
					// We do somthing once the server's response is OK
					if(xhr.readyState == 4 && xhr.status == 200){
						//alert(xhr.responseText);
						var body = document.getElementsByTagName("body")[0];
 
					// Retrieve <table> ID and create a <tbody> element
 
						var tbl = document.getElementById("table");
						var tblBody = document.createElement("tbody");
						var row = document.createElement("tr");
 
					// Create  <td> elements and a text node, make the text
					// node the contents of the <td>, and put the <td> at
					// the end of the table row
						var cell_1 = document.createElement("td");
						var cell_2 = document.createElement("td");
						var cell_3 = document.createElement("td");
						var cell_4 = document.createElement("td");
 
					// Create the first cell which is a text zone	
						var cell1=document.createElement("input");
						cell1.type="text";
						cell1.name="fname";
						cell1.size="20";
						cell1.maxlength="50";
						cell_1.appendChild(cell1);
 
					// Create the second cell which is a text area	
						var cell2=document.createElement("textarea");
						cell2.name="fdescription";
						cell2.rows="2";
						cell2.cols="30";
						cell_2.appendChild(cell2);
 
						var cell3 = document.createElement("div");
						cell3.innerHTML=xhr.responseText;
						cell_3.appendChild(cell3);
 
 
					// Create the fourth cell which is a href
						var cell4 = document.createElement("a");
						cell4.appendChild(document.createTextNode("[Delete]"));
						cell4.setAttribute("href","delete.php");
						cell_4.appendChild(cell4);
 
 
					// add cells to the row
						row.appendChild(cell_1);
						row.appendChild(cell_2);
						row.appendChild(cell_3);
						row.appendChild(cell_4);
 
 
					// add the row to the end of the table body
						tblBody.appendChild(row);
 
					// put the <tbody> in the <table>
						tbl.appendChild(tblBody);
					// appends <table> into <body>
						body.appendChild(tbl);
					// sets the border attribute of tbl to 2;
						tbl.setAttribute("border", "1");
				}
 
					}
 
				xhr.open("GET","fstatus.php",true);
				xhr.send(null);
			}
 
   </script>
 
</head>
<body >
<h1> Create an Item </h1>
<form method="post">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>
 
	</table>	
	<input type="submit" name ="submit" value="submit">
 
</form>
</form> 
</body>
</html>

ce code execute par ajax ce simple code fstatus.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
                // Retrieve all the statuses of a functionality
                                echo '<select name="fstatus">';
                                echo '<option value=1>Draft</option>';
                                echo '<option value=2>Available</option>';
                                echo '<option value=3>Private</option>';
                                echo '<option value=4>Pilot</option>';
                                echo '<option value=5>On Request</option>';
                                echo '</select>';
                
 ?>

voila, ce code cree parfaitement mes lignes. Mais je voudrai savoir comment je peux faire pour supprimer une ligne? et aussi comment faire pour recuperer les donnees entrees par le user?

Merci d'avance

**billyrose** · 24/06/2009, 16h08

j'ai trouve le code suivant sur le net

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
<html>
<head>
<script type="text/javascript">
function deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
</script>
</head>
<body>
 
<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td><td> Col 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
 
</body>
</html>

Et il marche parfaitement.
mais quand je le teste:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script>
   function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox and others
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest not supported by your browser
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
			/**
			*  method called when the user clicks on the button
			*/
			function go(){
				var xhr = getXhr()
				// We defined what we gonna do with the response
				xhr.onreadystatechange = function(){
					// We do somthing once the server's response is OK
					if(xhr.readyState == 4 && xhr.status == 200){
						//alert(xhr.responseText);
						var body = document.getElementsByTagName("body")[0];
 
					// Retrieve <table> ID and create a <tbody> element
 
						var tbl = document.getElementById("table");
						var tblBody = document.createElement("tbody");
						var row = document.createElement("tr");
 
					// Create  <td> elements and a text node, make the text
					// node the contents of the <td>, and put the <td> at
					// the end of the table row
						var cell_1 = document.createElement("td");
						var cell_2 = document.createElement("td");
						var cell_3 = document.createElement("td");
						var cell_4 = document.createElement("td");
 
					// Create the first cell which is a text zone	
						var cell1=document.createElement("input");
						cell1.type="text";
						cell1.name="fname";
						cell1.size="20";
						cell1.maxlength="50";
						cell_1.appendChild(cell1);
 
					// Create the second cell which is a text area	
						var cell2=document.createElement("textarea");
						cell2.name="fdescription";
						cell2.rows="2";
						cell2.cols="30";
						cell_2.appendChild(cell2);
 
						var cell3 = document.createElement("div");
						cell3.innerHTML=xhr.responseText;
						cell_3.appendChild(cell3);
 
 
					// Create the fourth cell which is a href
						/*var cell4 = document.createElement("a");
						cell4.setAttribute("href","javascrit:DeleteRow(this);");
						cell4.appendChild(document.createTextNode("[Delete]"));
						cell_4.appendChild(cell4);*/
						var cell4=document.createElement("input");
						cell4.type="button";
						cell4.value="Delete"
						cell4.onclick=deleteRow(this);
						cell_4.appendChild(cell4);
 
					// add cells to the row
						row.appendChild(cell_1);
						row.appendChild(cell_2);
						row.appendChild(cell_3);
						row.appendChild(cell_4);
 
 
					// add the row to the end of the table body
						tblBody.appendChild(row);
 
					// put the <tbody> in the <table>
						tbl.appendChild(tblBody);
					// appends <table> into <body>
						body.appendChild(tbl);
					// sets the border attribute of tbl to 2;
						tbl.setAttribute("border", "1");
				}
 
					}
 
				xhr.open("GET","fstatus.php",true);
				xhr.send(null);
			}
 
 
	function deleteRow(r){
		var i=r.parentNode.parentNode.rowIndex;
		document.getElementById('table').deleteRow(i);
	}
</script>
 
 
</head>
<body >
<h1> Create an Item </h1>
<form method="post">
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
		<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>
 
	</table>	
</form>
</form> 
</body>
</html>

j'obtiens

Error: parentNode.parentNode is null or not an object

Thanks

**RomainVALERI** · 24/06/2009, 16h57

C'est le "this" passé en param à deleteRow qui ne va pas : dans le contexte de la fonction onreadystatechange il référence l'objet xhr et non pas l'élément à supprimer...

essaie de modifier ton appel comme ça :

Code javascript :

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

cell4.onclick=deleteRow(row);

...row étant dans ton code la référence à la ligne du tableau à supprimer (si j'ai bien compris

)

>>> par contre et pour finir ^^ le code que tu as repris lançait la fonction de delete à partir de l'input dans le td, donc il fallait remonter de deux niveaux de parenté pour retrouver la ligne et la supprimer, d'où le "parentNode.parentNode"...
Dans ton cas tu passes déjà une référence de la ligne, donc modifie ta fonction deleteRow en supprimant tes deux parentNode...

**billyrose** · 24/06/2009, 17h16

Merci pour ta reponse et tes remarques
on entete disparait quand je clique sur Ajouter.

Code :

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

1
2
3
 
Line: 86
Error: Not Implemented

la ligne 86 est :

cell4.onclick=deleteRow(row);

je me demande si ceci est correcte.

Code :

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

1
2
3
4
var cell4=document.createElement("input");
cell4.type="button";
cell4.value="Delete"
cell4.onclick=deleteRow(row);

Code :

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

1
2
3
4
function deleteRow(r){
	var i=r.rowIndex;
	document.getElementById('table').deleteRow(i);
}

**vermine** · 24/06/2009, 17h26

Je me demande si il ne faut pas faire ceci:

Code :

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

cell4.onclick=deleteRow;

Et avoir donc ici:

Code :

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

1
2
3
4
5
6
 
function deleteRow()
{
   var i= this.rowIndex;
   document.getElementById('table').deleteRow(i);
}

**billyrose** · 24/06/2009, 17h33

salut,
Avec cette modification, quand je clique sur le bouton delete, la premiere fois, ca supprime l'entete de ma table. svp, pourquoi?

**vermine** · 24/06/2009, 17h42

Moi y en a pas savoir.
Que contient i ? Et si vous faites i+1 (passez en float sinon il risque de perdre la tête à certains moments).
Et à part supprimer la ligne d'en-tête, il supprime la ligne voulue aussi ?

**billyrose** · 24/06/2009, 17h49

la premiere fois que je fais [delete], l'entete est supprimee. mais la ligne reste. quand je re-clique sur [delete], la ligne est supprimee.
Qund j'ai essaye alert(i) reponse Undefined

Code :

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

1
2
3
4
5
6
function deleteRow(){
	var i= this.rowIndex + 1;
	//alert(i);
	document.getElementById('table').deleteRow(i);
 
}

avec ce code, j'obtiens le meme resultat.

**billyrose** · 24/06/2009, 17h53

je pense que je comprends le probleme.

jái cree plusieurs lignes. et j'ai remarque que ma function deleteRow() supprime dábord l'entete ensuite supprime la ligne x- 1 quand on clique sur [Delete] pour la ligne x. pour x different 1

Mais quand x = 1, la fonction deleteRow() supprime l'entete puis supprime effectivement la premiere ligne.

**billyrose** · 24/06/2009, 18h09

Je ne vois vraiment pas pourquoi j'ai ce probleme. dans l'exemple dont je me suis inspiree l'index change bien et Alert(i) renvoie un nombre. Mais dans mon cas alert(i) renvoie Undefined

**vermine** · 24/06/2009, 18h30

Et un alert de this.value, ça donne bien "Delete" ou ça ne donne rien ?

**billyrose** · 24/06/2009, 19h41

Envoyé par vermine

Et un alert de this.value, ça donne bien "Delete" ou ça ne donne rien ?

oui ca donne Delete

**vermine** · 25/06/2009, 08h04

Bien dans ce cas, nous sommes trop bas dans l'arborescence. Essayons de remettre les parentNode (le premier pour atteindre la cellule, le second pour atteindre la ligne):

Code :

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

1
2
 
var i = this.parentNode.parentNode.rowIndex;

**billyrose** · 25/06/2009, 09h07

Envoyé par vermine

Bien dans ce cas, nous sommes trop bas dans l'arborescence. Essayons de remettre les parentNode (le premier pour atteindre la cellule, le second pour atteindre la ligne):

Code :

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

1
2
 
var i = this.parentNode.parentNode.rowIndex;

Parfaitement raison. maintenant alert(i) donne les bonnes valeurs. et ca marche.
Merci

suppression des lignes d'une table

JavaScript

Discussions similaires

Partager

Partager