rajout ligne en tête d'un tableau html

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

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:

---

1 2 3 4 5

<table> <tbody id="monTableau"> ... </tbody> </table>

---

Dans le script :

Code:

---

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:

---

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:

---

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 ;)

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

Code:

---

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:

---

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

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:P

Bonjour,

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

Code:

---

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

---

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

perso j'utilise ExtJS pour gérer mes datagrid

ceux-ci sont très paramétrables et dispose de nombreuses fonctionnalités
tri sur les colonnes (alpha numérique date ...) show/.hide de colonne par le client
barre de bouton barre de statut
scroll vertical et horizontal
redimensionnement des colonnes
databinding
et pour l'édition le rowEditor est celui que je préfère.
http://www.sencha.com/deploy/dev/exa...ow-editor.html

j'utilise JSON mais il y a aussi XML comme solution
on associe un objet js datasource qui décrit la structure des données (liste des champs et leur type, et la clef primaire) on y associe une url

Code:

---

1 2 3 4 5 6 7 8 9 10

site: new Ext.data.JsonStore({ // store configs autoDestroy: true, autoLoad: true, url: Ext.app.baseUrl + 'flow/get-site-list/', // reader configs root: 'rows', idProperty: 'value', fields: ['value', 'label'] }),

---

on donne la datasource au grid
lorsque le grid s'affiche l'URL est invoqué en GET pour obtenir les données
losque l'utilisateur mets à jour une ligne ou en insère une ou en supprime une la datasource est mise automatiquement à jour
il est possible de mettre ajour via ajac automatiquement les données côté serveur
http://www.sencha.com/deploy/dev/exa...l/restful.html

c'est assez rapide de faire quelque chose de très complet

les première fois j'ai bêtement pompé les exemples
si la lib te parait trop volumineuse tu peux dans la section download faire ta propre lib en embarquant que les éléments que tu utilise

A+JYT

Bonjour à tous,
j'ai réussi à réaliser ce que je voulais, à savoir, faire un ajout ds la db via ajax, et ajout de la ligne correspondante dans le tableau, mais j'ai du le faire avec un innerhtml, car avec dom, je sais mettre un element dans une cellule, mais si j'ai plusieurs champs hidden par ex dans le même champs, cela ne marche pas ...?
Ou peut on trouver la reference complète de dom ?

Merci.
Alpha.

http://www.w3.org/TR/DOM-Level-2-Core/core.html

Pour les manips style insertion/recherche, en général c'est l'interface Node.

Un grand merci pour les infos :ccool:
J'ai été voir aussi extjs, c'est impressionnant au niveau des possibilités...

Alpha.