[DOM] innerHTML et IE -_-' [Fait]

**Kyaan** · 18/12/2008, 17h42

Salut à tous, j'ai développé un script de gestion de champs de formulaire dynamiques qui fonctionne à merveille sour FireFox (amen ^^) mais qui ne fonctionne pas du tout sous IE...

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
 
 	//des compteurs pour chaque type de donnée
 	var id_actions_immediates = 0;
 	var id_actions_correctives = 0;
 	var id_actions_preventives = 0;
 
 	//la fonction principale qui gère l'ajout des lignes
 	function AddLine(id_table, ref, text, qui, date)
 	{
 	 	//on récupère le compteur pour le type de donnée souhaité
 	 	switch(id_table)
 	 	{
 	 		case 'action_immediate':
 	 	 		var id = id_actions_immediates++;
 	 	 		break;
 	 		case 'action_corrective':
 	 	 		var id = id_actions_correctives++;
 	 	 		break;
 	 		case 'action_preventive':
 	 	 		var id = id_actions_preventives++;
 	 	 		break;
 
 	 	}
 
 	 	//on met en mémoire les données de ce type pour ne pas les perdre lors du changement de valeur du innerHTML
 	 	var DataTable = new Array;
		for(i=0;i<id;i++)
		{
			DataTable[i] = null;
 
			if(document.getElementById(id_table + '_ref' + i))
			{
				DataTable[i] = new Array;
				DataTable[i]["ref"] = document.getElementById(id_table + '_ref' + i).value;
				DataTable[i]["text"] = document.getElementById(id_table + '_text' + i).value;
				DataTable[i]["qui"] = document.getElementById(id_table + '_qui' + i).value;
				DataTable[i]["date"] = document.getElementById(id_table + '_date' + i).value;
			}
		}
 
 	 	//on ajoute la ligne au tableau correspondant au type choisi
 		document.getElementById(id_table).innerHTML += '<tr id="' + id_table + id + '">' +
 	 													 '<td><input type="hidden" 			id="' + id_table + '_ref' + id + '" 	name="' + id_table + '_ref[]" 	value="' + ref + '"></input>' + 
 	 													 	 '<input type="text" class="at" id="' + id_table + '_text' + id + '" 	name="' + id_table + '_text[]" 	value="' + text + '" maxlenght="255"></input></td>' + 
 	 													 '<td><input type="text" class="at" id="' + id_table + '_qui' + id + '" 	name="' + id_table + '_qui[]" 	value="' + qui + '" maxlenght="30"></input></td>' + 
 	 													 '<td><input type="text" class="at" id="' + id_table + '_date' + id + '" 	name="' + id_table + '_date[]" 	value="' + date + '" maxlenght="10"></input></td>' +
 	 													 '<td><a href="javascript:void(0);" onClick="DeleteLine(\'' + id_table + id + '\');"><img src="{ babInstallPath }skins/ovidentia/images/Puces/delete.png" alt="suppr"></a></a></td>' +  
 	 													'</tr>';
 
 	 	//puis on remet les données aux bons emplacements
 		for(i=0;i<id;i++)
		{
 			if(DataTable[i] != null)
 			{
	 			document.getElementById(id_table + '_ref' + i).value = DataTable[i]["ref"];
	 			document.getElementById(id_table + '_text' + i).value = DataTable[i]["text"];
				document.getElementById(id_table + '_qui' + i).value = DataTable[i]["qui"];
				document.getElementById(id_table + '_date' + i).value = DataTable[i]["date"];
 			}
		}
 	}

Voilà ce code est parfait pour ce que je veux faire mais grrr comme par hasard ça ne fonctionne pas sous IE, le symptome est que rien ne passe quand je click sur le bouton qui appel la fonction AddLine()

Quelqu'un sait-il comment contourner ce problème sans changer complètement de mécanisme svp?

**le_chomeur** · 18/12/2008, 18h16

un bout de code html pour tester ?

**Auteur** · 18/12/2008, 18h35

Pour créer / supprimer des lignes dans un tableau HTML, il faut utiliser les fonctions DOM. Voici un exemple complet

**Saray** · 18/12/2008, 19h48

Tu ne peux pas utiliser innerHTML pour un tableau... il faut que tu passes par le DOM. Par contre tu as le droit d'utiliser innerHTML pour un td.

De plus il faut la table doit avoir une structure valide, c'est à dire posséder un thead et un tbody.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
		var divbout=document.createElement('table');
		var hdivbout=document.createElement('thead');
		var bdivbout=document.createElement('tbody');
		var rdivbout=document.createElement('tr');
		var ddivbout=document.createElement('td');
 
		ddivbout.innerHTML='<span>et hop !</span>';
 
		rdivbout.appendChild(ddivbout);
		bdivbout.appendChild(rdivbout);	
		divbout.appendChild(hdivbout);
		divbout.appendChild(bdivbout);
		document.body.appendChild(divbout);

**Kyaan** · 19/12/2008, 10h23

Merci beaucoup pour vos réponses si rapides!!

J'ai cherché du coté du insertRow() et insertCell et ça a finit par donner du résultat, j'ai eu du mal à faire fonctionner la suppression de ligne mais j'ai finit par trouver une solution, voilà ce que donne le code à présent au cas où ça aiderai quelqu'un dans une recherche un jour ^^ (testé sous Firefox 3 et IE 6):

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
 	var id_actions_immediates = 0;
 	var id_actions_correctives = 0;
 	var id_actions_preventives = 0;
 
 	function AddLine(id_table, ref, text, qui, date)
 	{
 	 	switch(id_table)
 	 	{
 	 		case 'action_immediate':
 	 	 		var id = id_actions_immediates++;
 	 	 		break;
 	 		case 'action_corrective':
 	 	 		var id = id_actions_correctives++;
 	 	 		break;
 	 		case 'action_preventive':
 	 	 		var id = id_actions_preventives++;
 	 	 		break;
 
 	 	}
 
 
 		var myRow = document.getElementById(id_table).insertRow(-1);
 		myRow.id = id_table + id;
 		var myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="hidden" 		   id="' + id_table + '_ref' + id + '" 		name="' + id_table + '_ref[]" 	value="' + ref + '"></input>' + 
		 	 				'<input type="text" class="at" id="' + id_table + '_text' + id + '" 	name="' + id_table + '_text[]" 	value="' + text + '" maxlenght="255"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_qui' + id + '" 		name="' + id_table + '_qui[]" 	value="' + qui + '" maxlenght="30"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_date' + id + '" 	name="' + id_table + '_date[]" 	value="' + date + '" maxlenght="10"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<a href="javascript:void(0);" onClick="DeleteLine(\'' + id_table + id + '\');"><img src="{ babInstallPath }skins/ovidentia/images/Puces/delete.png" alt="suppr"></a>';
 	}
 
 	function DeleteLine(id_line)
 	{
 	 	try
 	 	{
 	 	 	//firefox
 	 		document.getElementById(id_line).remove();
 	 	}
 	 	catch(e)
 	 	{
 	 	 	//IE
 			eval('document.all.' + id_line + '.removeNode(true);');
 	 	}
 	}

et voilà un échantillon du HTML qui appelle cette fonction:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table id="action_immediate" width="100%">
	<tr>
		<td colspan="3">actions immediates</td>
	</tr>
	<tr>
		<td>text</td>
		<td>t_qui</td>
		<td>t_date (dd/mm/yyyy)</td>
		<td><a href="javascript:void(0);" onClick="AddLine('action_immediate', '0', '', '', '');"><img src="new.png" alt="new"></a></td>
	</tr>
</table>

ps: si quelqu'un se demande pkoi ma fonction AddLine() accepte des valeurs en argument c'est parce qu'au chargement de la page je l'appelle avec des valeurs générées par mon code php pour créer les lignes existant déjà.

encore une fois merci beaucoup à mes bienfaiteurs!

**Auteur** · 19/12/2008, 10h58

Code :

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

1
2
3
4
5
6
7
8
9
10
var myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="hidden" 		   id="' + id_table + '_ref' + id + '" 		name="' + id_table + '_ref[]" 	value="' + ref + '"></input>' + 
		 	 				'<input type="text" class="at" id="' + id_table + '_text' + id + '" 	name="' + id_table + '_text[]" 	value="' + text + '" maxlenght="255"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_qui' + id + '" 		name="' + id_table + '_qui[]" 	value="' + qui + '" maxlenght="30"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_date' + id + '" 	name="' + id_table + '_date[]" 	value="' + date + '" maxlenght="10"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<a href="javascript:void(0);" onClick="DeleteLine(\'' + id_table + id + '\');"><img src="{ babInstallPath }skins/ovidentia/images/Puces/delete.png" alt="suppr"></a>';

ouh là

(en bleu ci-dessus)
N'utilise pas innerHTML pour insérer de nouvelles balises (ici <input> et <a>), utilise les fonctions DOM :
- createElement()
- appendChild()
(cf. ce lien).

Par ailleurs une balise input n'a pas de balise fermante, voici la syntaxe :

Code xhtml :

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

1
2
 
<input type="button" value="Cliquez ici" onclick="alert('coucou')" />

Ecris également les événements en minuscules : onclick et pas onClick.

Pour supprimer une ligne, ce n'est pas la fonction remove() mais deleteRow() (cf. le lien que j'ai donné dans le message 3) de l'objet table.

[DOM] innerHTML et IE -_-' [Fait]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager