Discussion :

[identifiant_bidon]

Bonjour à tous,

Sur ma page, je dispose d'une table et d'un bouton. Lorsque je clique sur le bouton, une ligne est ajoutée à ma table. Pour le moment, la ligne vient s'ajouter en bas de tableau. Je voudrais faire en sorte que la ligne ajoutée vienne prendre la place de la première ligne du tableau. Donc, à chaque fois que je clique sur le bouton une ligne s'ajoute par le haut, abaissant les autres lignes.

J'utilise un code de ce genre (j'ai pas le code exact car il est chez moi ):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var tbody = document.getElementById("table1").tBodies[0]; 
var row = document.createElement("TR"); 
var cell1 = document.createElement("TD"); 
var inp1 = document.createElement("INPUT"); 
inp1.setAttribute("type","checkbox"); 
inp1.setAttribute("name","list");
inp1.setAttribute("value", i); 
cell1.appendChild(inp1); 
 
row.appendChild(cell1); 
tbody.appendChild(row);

Merci beaucoup

[SpaceFrog]

append comme son nom l'indique veut dire "à la fin"

regarde du coté de insertBefore()

[Bovino]

Code :

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

1
2
var row = tbody.insertRow(0);
var cell1 = row.insertCell(0);

[sekaijin]

Bonjour à tous,

Sur ma page, je dispose d'une table et d'un bouton. Lorsque je clique sur le bouton, une ligne est ajoutée à ma table. Pour le moment, la ligne vient s'ajouter en bas de tableau. Je voudrais faire en sorte que la ligne ajoutée vienne prendre la place de la première ligne du tableau. Donc, à chaque fois que je clique sur le bouton une ligne s'ajoute par le haut, abaissant les autres lignes.

J'utilise un code de ce genre (j'ai pas le code exact car il est chez moi ):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var tbody = document.getElementById("table1").tBodies[0]; 
var row = document.createElement("TR"); 
var cell1 = document.createElement("TD"); 
var inp1 = document.createElement("INPUT"); 
inp1.setAttribute("type","checkbox"); 
inp1.setAttribute("name","list");
inp1.setAttribute("value", i); 
cell1.appendChild(inp1); 
 
row.appendChild(cell1); 
tbody.appendChild(row);

Merci beaucoup

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var tbody = document.getElementById("table1").tBodies[0]; 
var row = document.createElement("TR"); 
var cell1 = document.createElement("TD"); 
var inp1 = document.createElement("INPUT"); 
inp1.setAttribute("type","checkbox"); 
inp1.setAttribute("name","list");
inp1.setAttribute("value", i); 
cell1.appendChild(inp1); 
 
row.appendChild(cell1); 
//tbody.appendChild(row);
tbody.insertBefore(row,tbody.firstChild);

JYT

[identifiant_bidon]

Nickel merci bien, je regarde ça ce soir et je vous tiens au courant!!

[identifiant_bidon]

insertBefore marche nickel, merci !!!

[NoSmoking]

perso, j'ai une petite préférence pour les méthodes proposées par Bovino, elles font le createElement et le appendChild en une seule ligne.

De plus on insère sur la TABLE directement et pas obligatoirement sur le TBODY de celle ci

Code :

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

1
2
3
var oTable = document.getElementById('la_table');
var oRow   = oTable.insertRow(0);
var oCell  = oRow.insertCell(0);

[sekaijin]

Attention car certain navigateur ajoute un TBody si le code html l'a oublié

A+JYT