Ajouter une ligne a un tableau "par le haut" [Résolu]

identifiant_bidon · 07/06/2011, 15h07

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 · 07/06/2011, 15h10

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

regarde du coté de insertBefore()

Bovino · 07/06/2011, 15h15

Code :

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

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

sekaijin · 07/06/2011, 15h19

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

):

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 · 07/06/2011, 15h24

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

identifiant_bidon · 07/06/2011, 20h43

insertBefore marche nickel, merci !!!

NoSmoking · 07/06/2011, 22h22

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 · 08/06/2011, 08h52

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

A+JYT

identifiant_bidon · 09/06/2011, 07h19

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)

NoSmoking · 09/06/2011, 20h34

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 :

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

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

identifiant_bidon · 10/06/2011, 07h14

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 :

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

sekaijin · 10/06/2011, 07h18

Citation:

Envoyé par NoSmoking

utilises donc

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

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

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

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

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

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

dans un cas comme ça que signifie

Code :

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

oTable.insertRow(0)

A+JYT

identifiant_bidon · 10/06/2011, 07h43

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 :

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

NoSmoking · 10/06/2011, 09h25

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 :

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

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 :

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

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.

identifiant_bidon · 12/06/2011, 10h43

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

07/06/2011, 15h10	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	append comme son nom l'indique veut dire "à la fin" regarde du coté de insertBefore() __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

07/06/2011, 15h24	#5
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Nickel merci bien, je regarde ça ce soir et je vous tiens au courant!! __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

07/06/2011, 20h43	#6
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	insertBefore marche nickel, merci !!! __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

08/06/2011, 08h52	#8
sekaijin Expert Confirmé Urbaniste Inscription : juillet 2004 Messages : 1 421 Détails du profil Informations personnelles : Sexe : Âge : 48 Localisation : France, Yvelines (Île de France) Informations professionnelles : Activité : Urbaniste Secteur : Santé Informations forums : Inscription : juillet 2004 Messages : 1 421 Points : 2 809 Points : 2 809	Attention car certain navigateur ajoute un TBody si le code html l'a oublié A+JYT
	00

09/06/2011, 07h19	#9
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	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) __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

12/06/2011, 10h43	#15
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Ok, je comprends NoSmoking. Merci, tu as tout juste ! __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email