Delete Ok sur IE mais pas FF

**billyrose** · 24/07/2009, 09h34

Bonjour a tous,

J' ai un code de creation dynamique de lignes en JS. sur chaque ligne, j' ai un bouton Delete qui me permet de la supprimer.

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
<?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">
 
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script language="javascript">
 var bUniqueRowID = 0;
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(" Your browser does not support XMLHTTPRequest objects..."); 
		xhr = false; 
		} 
     return xhr
	}
 
	/**
	*  method called when the user clicks on the button
	*/
 
function gobr(){
	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){
 
			// Retrieve <table> ID and create a <tbody> element
 
			var tbl = document.getElementById("brtable");
			var tblBody = document.createElement("tbody");
			var row = document.createElement("tr");
 
			bUniqueRowID += 1;
 
			var cell_1 = document.createElement("td");
			cell_1.align="center";
			cell_1.valign="center";
			var cell_2 = document.createElement("td");
			cell_2.align="center";
			cell_2.valign="center";
			var cell_3 = document.createElement("td");
			cell_3.align="center";
			cell_3.valign="center";
 
 
		// Create the first cell which is a select
 
			var cell1 = document.createElement("div");
			cell1.innerHTML=xhr.responseText;
			cell_1.appendChild(cell1);		
 
		//Create the second cell a checked box
			var cell2=document.createElement("input");
			cell2.type="checkbox";
			cell2.name="brdedicated";
			cell_2.appendChild(cell2);
 
		// Create the third cell which is a button
			var cell3=document.createElement("input");
			cell3.type="button";
			cell3.value="Delete"
			cell3.onclick=delRowbr;
			cell_3.appendChild(cell3);						
 
			// add cells to the row
			row.appendChild(cell_1);
			row.appendChild(cell_2);
			row.appendChild(cell_3);
 
		// add the row to the end of the table body
			tblBody.appendChild(row);
 
		// put the <tbody> in the <table>
			tbl.appendChild(tblBody);
 
		// sets the border attribute of tbl to 2;
			tbl.setAttribute("border", "2");
 
		}
	}
	xhr.open("GET","brded.php?dt=" + new Date().getTime(),true);
	xhr.send(null);
}	
 
function delRowbr(unNom){
  var monObjet = this; 
  if(unNom != null) {
       monObjet = unNom;
  }
  var i= monObjet.parentNode.parentNode.rowIndex;
  document.getElementById('brtable').deleteRow(i);
}
 
</script>
 
</head>
 
<form method="POST" action="br2.php">
 
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="brtable">
		<tr>
		<td><b>Business Rule Type:</b></td>
		<td><b>Dedicated:</b></td>
		<td><input type="button" Name= "Ajouterbr" Value="ADD BR" onclick="gobr()"></td>
		</tr>
 
	</table>
 
</form> 
 
 
</body>
</html>

Sur IE, quand je clique sur Delete, la ligne est supprimee mais sur FF, quand je clique sur Delete, rien ne se passe. la ligne n' est pas supprimee.

Merci d'avance de votre aide.

Best,
Billy

**RomainVALERI** · 24/07/2009, 09h49

C'est un problème très classique et récurrent à propos de la manière dont FF et IE construisent (en l'occurrence différemment) l'arbre DOM de ta page : une petite recherche (notamment sur ce site) devrait donner beaucoup de résultats utiles ^^

**emmanuel.remy** · 24/07/2009, 12h45

Salut,

Je te propose cette solution vite faite et qui ne dépend de rien

: à retester bien sûr ! (J'ai modifié ton code - suppression de l'aspect AJAX pour tester - mais il reste compatible avec ce que tu veux faire)

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script language="javascript">
 var bUniqueRowID = 0;
			
	/**
	*  method called when the user clicks on the button
	*/
	
function gobr(){
 
			// Retrieve <table> ID and create a <tbody> element
									
			var tbl = document.getElementById("brtable");
			var tblBody = document.createElement("tbody");
			var row = document.createElement("tr");
			
			bUniqueRowID += 1;
			
			var cell_1 = document.createElement("td");
			cell_1.align="center";
			cell_1.valign="center";
			var cell_2 = document.createElement("td");
			cell_2.align="center";
			cell_2.valign="center";
			var cell_3 = document.createElement("td");
			cell_3.align="center";
			cell_3.valign="center";
 
							
		// Create the first cell which is a select
 
			var cell1 = document.createElement("div");
			cell1.innerHTML="TEXTE " + bUniqueRowID; //ici responseText
			cell_1.appendChild(cell1);		
								
		//Create the second cell a checked box
			var cell2=document.createElement("input");
			cell2.type="checkbox";
			cell2.name="brdedicated";
			cell_2.appendChild(cell2);
			
		// Create the third cell which is a button
			var cell3=document.createElement("input");
			cell3.type="button";
			cell3.value="Delete"
			cell_3.appendChild(cell3);						
			
			//on ajoute les cellules SANS mettre l'événement onclick DELETE
 
			// add cells to the row
			row.appendChild(cell_1);
			row.appendChild(cell_2);
			row.appendChild(cell_3);

			//on ajoute MAINTENANT le onclick sous la forme d'une fonction
			//qui du coup connait déjà la ligne correspondante
			cell3.onclick=delRowbr(row);

 
		// add the row to the end of the table body
			tblBody.appendChild(row);
								
		// put the <tbody> in the <table>
			tbl.appendChild(tblBody);
			
		// sets the border attribute of tbl to 2;
			tbl.setAttribute("border", "2");
			
}	

//la fonction qui "fabrique" la fonction de click dédiée pour la ligne concernée
function delRowbr(row){
  return function() {
    document.getElementById('brtable').deleteRow(row.rowIndex);
  };
}
 
</script>
 
</head>
 
<form method="POST" action="br2.php">
 
	<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="brtable">
		<tr>
		<td><b>Business Rule Type:</b></td>
		<td><b>Dedicated:</b></td>
		<td><input type="button" Name= "Ajouterbr" Value="ADD BR" onclick="gobr()"></td>
		</tr>
 
	</table>
 
</form> 
 
 
</body>
</html>

ERE

Delete Ok sur IE mais pas FF

JavaScript

Discussions similaires

Partager

Partager