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

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

[NoSmoking]

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]

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]

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]

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]

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]

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