Discussion :

[X260SH]

Bonjour, ou bonsoir.

J'ai, dans une page HTML, un bouton select qui me permet de charger un document XML dans un tableau HTML, lui même dans un <div id="destination">. Mon code est le suivant :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<form name="formulaire">
	<select name="select">
		<option value="catalog1">Catalogue 1</option>
		<option value="catalog2">Catalogue 2</option>
	</select>
	<input type="button" value="Regarder" onclick="verification()" />
	<input type="text" name="result" style="display:none;"/>
</form>
<div id="destination"></div>

Enfin, bon, ce n'est pas très important, ce qui compte, c'est le code JS :

Code JavaScript :

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
function verification()
{
	var noeud = document.getElementById('destination');
	while (noeud.childNodes.length>0) {
	noeud.removeChild(noeud.firstChild);}
	formulaire.result.value = formulaire.select.value+".xml";
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("GET",formulaire.result.value,false);
	xmlhttp.send();
	xmlDoc=xmlhttp.responseXML; 
	// endroit on l'on va ajouter la TABLE
	var oDest = document.getElementById('destination');
	// Eléments manipulés
	var oText, oCell, oRow, oTable = document.createElement('TABLE');
	var x=xmlDoc.getElementsByTagName("CD");
	oRow  = oTable.insertRow(); //Nouvelle ligne
	oCell = oRow.insertCell(); //On y insère la première cellule.
	oCell.setAttribute('colspan', 4); //On la met en colspan 2.
	oText = document.createTextNode(formulaire.select.value);	 //On écrit dedans.
	oCell.appendChild( oText); //Et on l'envoie.
 
	for (i=0;i<x.length;i++) {
	oRow  = oTable.insertRow();
 
	oCell = oRow.insertCell();
	oText = document.createTextNode(i);	
	oCell.appendChild( oText);
 
	oCell = oRow.insertCell();
	oText = document.createTextNode(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);	
	oCell.appendChild( oText);
 
	oCell = oRow.insertCell();
	oText = document.createTextNode(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);	
	oCell.appendChild( oText);
 
	oCell = oRow.insertCell();
	oText = document.createTextNode(x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue);	
	oCell.appendChild( oText);
	}
	// ajout TABLE créée
	oDest.appendChild( oTable);
}

mais voilà, à la ligne 30 (oCell = oRow.insertCell(); //On y insère la première cellules.), j'aimerai mettre une cellule th ou bien pouvoir lui mettre un id (pour la modifier avec les styles CSS).

Pouvez-vous m'aider à cela ? Merci beaucoup d'avance !

[NoSmoking]

Bonjour,
effectivement insertCell crée une TD, il va te fallloir, si tu souhaites une TH la créer et l'ajouter via les méthodes createElement et appendChild. Attention toutefois à faire l'append sur une TBODY.

Si le soucis est simplement de pouvoir lui appliquer un style particulier alors le CSS est suffisant, regarde du coté du sélecteur :first-child.

[X260SH]

Je vous remercie, c'est que vrai je n'avais pas penser au sélecteur :first-child...
Je n'approfondi pas le JS, dans ce cas.
Merci encore !

Résolu.