Ajouter une ligne a un tableau "par le haut"

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 8-) ):

Code:

---

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

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

regarde du coté de insertBefore()

Code:

---

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

---

Citation:

---

Envoyé par 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 8-) ):

Code:

---

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:

---

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

---

:D
JYT

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

insertBefore marche nickel, merci !!! :ccool:

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:

---

1 2 3

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

---

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

A+JYT

puisque tu en parles sekaijin, je crois qu'il va falloir que je m'y prenne autrement, ce code ne fonctionne pas sous IE8 (probablement d'autres versions d'IE aussi) :(

Citation:

---

Envoyé par identifiant_bidon

puisque tu en parles sekaijin, je crois qu'il va falloir que je m'y prenne autrement, ce code ne fonctionne pas sous IE8 (probablement d'autres versions d'IE aussi) :(

---

utilises donc

Code:

---

1 2 3

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

---

mais je reste surpris que cela ne fonctionne pas, et même sous IE8!

NoSmoking, j'utilise en gros un code proche de celui-ci. Marche très bien sous Firefox mais aucune action quand je clique sur le lien sous IE (IE8 toujours). Il ne se passe rien. J'ai même pas une petite erreur de script pour me guider. Que dalle !!! ;)

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

<html> <head> <script> function addRowToTable() { var tabBody = document.getElementById('table_test');   var row1 = document.createElement("tr"); var cell11 = document.createElement("td"); cell11.style.fontFamily = 'Verdana, Arial, Helvetica, sans-serif'; cell11.style.fontSize = '13px'; cell11.style.fontWeight = 'bold'; cell11.style.paddingBottom = '5px'; var textnode11 = document.createTextNode("Employeur"); cell11.appendChild(textnode11); row1.appendChild(cell11); tabBody.appendChild(row1); } </script> </head> <body> <a href="#" onclick="addRowToTable();">aaaaaa</a> <table id="table_test" border="1" cellpadding="0" cellspacing="0" width="90%"> <tr height="30px"><td>&nbsp;</td></tr> </table> </body> </html>

---

Citation:

---

Envoyé par NoSmoking

utilises donc

Code:

---

1 2 3

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

---

mais je reste surpris que cela ne fonctionne pas, et même sous IE8!

---

quelque soit le code utilisé insertBefore ou insertRow cela insère une ligne dans le Tbody

Le TBody devrait toujours être présent dans le code HTML il suffit donc de l'ajouter.

si on ne le fait pas on s'expose à des pb de compatibilité
certain moteur l'ajoute et d'autre non
on n'a donc pas le même DOM pour le même code HTML.

en mettant systématiquement un Tbody à toutes les tables on est sur de son coup tous les navigateur vont faire le nécessaire.

Code:

---

<table><tbody><tr>....

---

enfin je préfère insertBefore car ça marche partout table ou pas table. de plus j'ai des table avec plusieurs tbody

Code:

---

<table><thead>...</thead><tbody><tr>....</tbody><tbody><tr>....

---

dans un cas comme ça que signifie

Code:

---

oTable.insertRow(0)

---

A+JYT

Salut sekaijin

J'ai rajouté le tbody dans la table de mon fichier de test. Ça ne marche toujours pas. J'ajoute que ça ne marche pas sous IE8, IE6 et que ça marche sous Chrome et FF. :?

J'ai aussi essayé avec insertRow. Même chose !

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<html> <head> <script> function addRowToTable() { var oTable = document.getElementById('table_test'); var oRow = oTable.insertRow(0); var oCell = oRow.insertCell(0); } </script> </head> <body> <a href="#" onClick="addRowToTable();">aaaaaa</a> <table id="table_test" border="1" cellpadding="0" cellspacing="0" width="90%"> <tbody> <tr height="30px"><td>&nbsp;</td></tr> </tbody> </table> </body> </html>

---

TO identifiant_bidon :
dans ton code de 7h14 il te manque la référence au tBodies[0], sous IE il est IMPERATIF d'ajouter au TBODY.

Code:

---

var tabBody = document.getElementById('table_test').tBodies[0];

---

Dans ton cade de 7h43, il te faut également ajouter le nodeText pour voir que cela fonctionne

Code:

---

1 2 3 4 5 6 7 8

function addRowToTable(){ var oTable = document.getElementById('table_test'); var oRow = oTable.insertRow(0); var oCell = oRow.insertCell(0); /* AJOUT pour visualisation */ var oText = document.createTextNode("Employeur"); oCell.appendChild( oText); }

---

TO sekaijin :
il est clair que sur les tables possédant plusieurs TBODY la méthode insertRow fera l'insertion sur le 1st TBODY.

Ok, je comprends NoSmoking. Merci, tu as tout juste ! :ccool: