Discussion :

[blaxh404]

Bonjour à tous !
Je viens de terminer mon premier "gros" code javascript, il traite pas mal de chose

J'ai lancé sous chrome 19.0.1084.56 m , tout marche à merveille.
Puis vint le moment ou j'ai tester les autres navigateurs et les cauchemars commencent.

Sous IE le script ne marche simplement pas.
Sous Firefox il écrit undefined partout.

Quelqu'un saurait me dire ce qui pose les problème de compatibilité? J'en ai absolument aucune idée et il faut que je termine cela au plus vite, c'est un site qu'une personne m'a demandé de faire (j'ai peut être été un peu trop prétentieux avec le script js alors que je ne connaissait pas grand chose).

Code :

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

1
2
3
4
5
6
7
8
9
10
<table id="articles_tab">
         	<tr>
			<td class="article" id="art1" bulle="<img src='imgproduit/1.jpg'/>">Settler</td><td id="cont1">1 x 3kg</td><td id="prix1">32.50 .-</td><td><input  onblur="getid(this); return test(this);" id="a1" type="text"/></td>
		</tr>
		<tr>
			<td class="article" id="art2" bulle="<img src='imgproduit/1.jpg'/>">Settler</td><td id="cont2">1 x 3kg</td><td id="prix2">32.50 .-</td><td><input onblur="getid(this);return test(this);" id="a2" type="text"/></td>
		</tr>
</table>
<table id="art_command">
</table>

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
function getid(id){
  var idvalue;
 
idvalue = id.value;
IDa = id.id;
ID = IDa.substr(IDa.lastIndexOf('a') + 1);
 
 
article = document.getElementById('art' + ID).innerText;
contenu = document.getElementById('cont' + ID).innerText;
prix = 	  document.getElementById('prix' + ID).innerText;
 
 
quantite = id.value;
 
commande = document.getElementById('art_command');
 
 
if(idvalue > 0){
 
if(document.getElementById('headtable') == null){
	commande.innerHTML = '<tr id="headtable"><th class="article_name">Article</th><th class="contenu_name">Contenu</th><th class="prix_name">Prix</th><th class="quantite_name">Quantité</th></tr>';
	commande.innerHTML += '<tr id="' + 'tr' + ID + '"><td class="article">' + article + '<input type="text" name="article" value="' + article + '"/></td><td>' + contenu + '<input type="text" name="contenu" value="' + contenu + '"/></td><td>' + prix + '<input type="text" name="prix" value="' + prix + '"/></td><td><input type="text" name="quantite" value="' + quantite + '"/></td><td class="suppr">X</td></tr>';
}
else{
	commande.innerHTML += '<tr id="' + 'tr' + ID + '"><td class="article">' + article + '<input type="text" name="article" value="' + article + '"/></td><td>' + contenu + '<input type="text" name="contenu" value="' + contenu + '"/></td><td>' + prix + '<input type="text" name="prix" value="' + prix + '"/></td><td><input type="text" name="quantite" value="' + quantite + '"/></td></tr>';
	}
}
 
if(idvalue == 0){
	ligne = document.getElementById('tr' + ID);
	ligne.parentNode.removeChild(ligne);
}
 
lesuperid = document.querySelectorAll('#tr' + ID);
if(lesuperid.length > 1){
	ligne = document.getElementById('tr' + ID);
	ligne.parentNode.removeChild(ligne);
}
 
//suppr = document.getElementById('
 
}

[NoSmoking]

Bonsoir et bienvenue sur DVP.

Au contour du forum tu aurais pu rencontrer des discussions qui parle du problème de la modification ou de l'insertion d'éléments dans des TABLEs.

Avec IE il faut appender sur le TBODY.
Avec tous les navigateurs il est préférable de passer par les ajouts via les méthodes DOM, insertCell, inserRow ou autre createElement allié avec appendChild.

[headmax]

Salut ton innerHTML est déprécié : il faut le remplacer par un appendChild

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
 
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var table=document.getElementById('art_command');
tr.id = "header";
table.appendChild(tr);
tr.appendChild(td1).textContent = "Cel1";
tr.appendChild(td2).textContent = "Cel2";
 
Ou bien cette méthode
 
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.textContent="New";
cell2.textContent="New";

[Bovino]

Salut ton innerHTML est déprécié

Pas exactement, il a même été normalisé par le W3C : http://www.w3.org/TR/2008/WD-html5-2...tml#innerhtml0

[headmax]

lol merci pour l'info bovino, c bon a savoir.