Discussion :

[alpha232]

bonjour, je voudrais utiliser javascript pour rajouter des lignes en tête d'un tableau, mais je ne sais pas comment faire?
Merci pour votre aide.
Alpha

[Watilin]

Salut,
il faut tout d’abord que tu aies une référence sur ton tableau, c’est-à-dire une variable qui te permet d’y accéder avec JavaScript. Le mieux c’est d’utiliser un id.
De plus, si tu construis bien tes tableaux, tu mets des balises <tbody>, donc je te conseille de mettre l’id sur le tbody.
Dans le code HTML :

Code :

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

1
2
3
4
5
<table>
<tbody id="monTableau">
	...
</tbody>
</table>

Dans le script :

Code :

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

var tableau = document.getElementById('monTableau');

Ensuite, si tu n’as pas de framework, utilise les méthodes du DOM pour créer puis insérer des éléments HTML.

Création :

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
// création du contenu des td
var text1 = document.createTextNode('riri'),
	text2 = document.createTextNode('fifi'),
	text3 = document.createTextNode('loulou');
 
// création des td
var td1 = document.createElement('td'),
	td2 = document.createElement('td'),
	td3 = document.createElement('td');
 
// remplissage des td
td1.appendChild(text1);
td2.appendChild(text2);
td3.appendChild(text3);
 
// création du tr
var tr = document.createElement('tr');
 
// assemblage du fragment
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

Insertion :

Code :

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

1
2
3
4
5
6
7
8
9
10
// on commence par récupérer l’ancienne première ligne
// attention aux nœuds text correspondant aux sauts de ligne
var noeud = tableau.firstChild;
while (noeud.nodeType != 1) {
	// tant que le nœud n’est pas un élément
	noeud = noeud.nextSibling;
}
 
// on insère le fragment
tableau.insertBefore(tr, noeud);

Je reste dispo pour les questions

[sekaijin]

même que watilin code à un petit détail près

Code :

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

1
2
3
4
5
<table>
<tbody id="monTableau">
	...
</tbody>
</table>

attention si tu mets pas le thbody le navigateur lui le mettre pour toi
dans le script

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
// création du contenu des td
var text1 = document.createTextNode('riri'),
    text2 = document.createTextNode('fifi'),
    text3 = document.createTextNode('loulou');
 
// création des td
var th1 = document.createElement('th'),
    th2 = document.createElement('th'),
    th3 = document.createElement('th');
 
// remplissage des td
th1.appendChild(text1);
th2.appendChild(text2);
th3.appendChild(text3);
 
// création du tr
var tr = document.createElement('tr');
 
// création du thead
var thead = document.createElement('thead');
 
// assemblage du fragment
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
thead.appendChild(tr);
 
 
// on insère le fragment dans le noeud parent avant le body
tableau.parentNode.insertBefore(thead, tableau);

A+JYT

[alpha232]

Un grand merci à vous deux, cela fonctionne à merveille, j'ai su me placer sur le 2è élément (après le titre) pour créer les nouvelles lignes.
Par contre j'ai encore une question, en fait cela va servir dans un formulaire, à partir duquel on fait une insertion dans la base de données (en utilisant ajax), et si l'insertion s'est bien passée, le but c'est d'afficher la ligne qui a été insérée en 1ère position sur le tableau.Dès lors , comment insérer les éléments générés par la page appelée par ajax, dans le tableau (j'avais pensé à innerhtml mais sur quel élément?)

Merci.
Alpha

[vermine]

Bonjour,

Non, non, pas de innerHTML, utilisez le DOM comme vous venez de faire:

Code js :

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

document.createElement(), appendChild(), ...

[javatwister]

quoique insertBefore() est mieux adaptée si tu veux à chaque fois insérer en première position;