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;

[sekaijin]

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 :

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

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

[alpha232]

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.

[Watilin]

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.

[alpha232]

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

Alpha.