Bonsoir,

je rencontre un problème dans une fonction qui a pour but d'ajouter une ligne en dessous d'une ligne déjà présente contenant une description de la ligne ci dessus.

La fonction js est la suivante :

id_last_expand = null;

function expand(nbr, descr) {
	if (id_last_expand != nbr) {
		if (id_last_expand != null) {
			oldtr = document.getElementById('js-generated-content');
			document.getElementById('liste').firstChild.removeChild(oldtr);
		}
		id_last_expand = nbr;
		
		// Création élément tr du tableau
		tr = document.createElement('tr');
		// Assignation id
		tr.id = 'js-generated-content';
		
		if (nbr_list < (nbr+1)) {
			// Pour le dernier élément de la liste il n'y a pas d'élément suivant
			// Donc on ajoute l'élément tr en fin de tableau
			document.getElementById('liste').appendChild(tr);
		} else {
			// Recuperation de l'élément suivant
			ligne = document.getElementById(nbr+1);
			// Ajoute de l'élément tr
			ligne.parentNode.insertBefore(tr, ligne);
		}
		
		// Création élément td
		td = document.createElement('td');
		// Assignation id
		td.id = 'description';
		// Assignation colspan (la cellule prendra la place de 4 cellule)
		td.setAttribute('colspan', 4);
		// Ajoute l'élément td à tr
		document.getElementById('js-generated-content').appendChild(td);
		// Ajout de l'entrée du tableau qui contient la description du snippet
		document.getElementById('description').appendChild(document.createTextNode(descr[nbr]));
	}
}

L'erreur survient dans le bloc conditionnel if de la ligne 5 à 8.
Car lorsque je veux afficher la description d'une autre ligne j'aimerais que la précédente soit retirée. Vous pourrez remarquer que dans le code du tableau ci dessous il y a une balise tbody qui englobe tout les éléments du tableau que je n'ai jamais mit dans le code à la base et qui a l'air de s'ajouter par magie lors des manipulations DOM (je ne comprend pas oO).
Du coups, j'ai essaye de rajouter l'attribut firstChild au getElementById
pour pouvoir avoir un pointeur sur la balise tbody qui englobe tout les tr.
Mais j'obtiens quand même une erreur qui dit qu'il ne trouve pas le node.

Je ne comprend donc pas quel erreur j'ai faite dans ma fonction pour qu'il n'arrive pas a retiré cet élément de mon tableau...

Le tableau sur lequel je travaille est celui ci :

<table id="liste">
	<tbody>
	<tr class="title">
		<th>ID</th>
		<th>Title</th>
		<th>Name</th>
		<th>Link</th>
	</tr>
	<tr id="0" class="even">
		<td>1</td>
		<td>Love algorithm</td>
		<td>test</td>
		<td><a href="#" onclick="expand(0, descriptions);">Details</a></td>
	</tr>
	<tr id="1" class="odd">
		<td>2</td>
		<td>Work algorithm</td>
		<td>test</td>
		<td><a href="#" onclick="expand(1, descriptions);">Details</a></td>
	</tr>
	<tr id="js-generated-content">
		<td colspan="4" id="description">&lt;h1&gt; is it working? &lt;/h1&gt;</td>
	</tr>
	<tr id="2" class="even">
		<td>3</td>
		<td>Love algorithm</td>
		<td>test</td>
		<td><a href="#" onclick="expand(2, descriptions);">Details</a></td>
	</tr>
	<tr id="3" class="odd">
		<td>4</td>
		<td>Love algorithm</td>
		<td>test</td>
		<td><a href="#" onclick="expand(3, descriptions);">Details</a></td>
	</tr>
	</tbody>
</table>

Le tbody est ajouté automatiquement... car il est censé être présent dans ton code HTML

Donc il faut que tu en tiennes compte.


Mais il faut aussi tenir compte des noeuds de texte vides

Sous Firefox notamment (peut-être aussi Chrome ?), les passages à la ligne présents entre deux balises de ton code source HTML représentent un noeud de texte vide...

Je pense que c'est ce noeud de texte que tu récupères avec ton firstChild...

Il serait donc judicieux de vérifier le type de noeud grâce à la propriété nodeType qui vaut 1 pour les éléments HTML et 3 pour les noeuds texte.

Yeah ! Un grand merci à toi Golmote !

(Je reprend un TP pour un amis pour l'aider donc je n'avais pas écrit le tableau moi même :p)

J'ai simplement ajouter un thead et un tbody et mit mon id "liste" sur celui ci et retirer simplement le firstChild et tout marche niquel !

Mille Merci