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

suppression des lignes d'une table

JavaScript

Vue hybride

Discussions similaires

Partager

Partager