Discussion :

[brazza]

Bonjour,

J'essai de créer une ligne dans une table de manière dynamique en usant des DOM, mais c'est sans succès. Alors je demande un coup de pouce. Voici la fonction javascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
function addrow()
{
    var tbl = document.getElementById('mytable')
 
    // Ici je récupère la ligne à copier
    var refligne = tbl.getElementsByTagName('tr')[0];
   // Là je cree le clone 
   var cloneligne = refligne.cloneNode()
    // Et là je l'affiche 
    tbl.appendChild(cloneligne)
}
</script>

et enfin le HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
<table width="100%" border="1" cellpadding="2" id="mytable">
  <tr align="center">
    <td>texte 1</td>
    <td>texte 2</td>
  </tr>
</table>
 
<a href="#" onclick="addrow()">Ajoute une ligne</a>

Ce code ne produit rien, peut-être ai-je oublié une étape. Merci de vos lumières.

Cordialement,

[ryan]

Yop!

Quand tu ajoutes seulement un TR dans une TABLE, tu ne vois rien de plus que ce qu'il n'y avait avant. Tu dois ajouter au moins un TD dans ton TR pour voir apparaître quelque chose, non?

[AlphonseBrown]

Salut, je me joint a ton problème mais différement.

Voici une fonction qui ajoute une ligne dans un tableau (adapte la a tes besoins)

Elle marche sur Firefox mais pas sur IE, que faire?

merci

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
function ajoutligneentrant(tableau,classligne)
			{
				//ajout deligne dynamiquement
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				var td2 = document.createElement("td");
				var td3 = document.createElement("td");
				var td4 = document.createElement("td");
 
				td1.appendChild(document.createTextNode(" td1 "));
				td2.appendChild(document.createTextNode(" td2 "));
				td3.appendChild(document.createTextNode(" td3 "));
				td4.appendChild(document.createTextNode(" td4 "));
 
				tr.style.backgroundColor="ff9900";
				//tr.style.backgroundColor="ffcc33";
 
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
 
				//ajout de la ligne
				document.getElementById(tableau).appendChild(tr);		
			}

[AlphonseBrown]

quelq'un verrait il le souci?

[ryan]

Yop!

As-tu essayé de modifier l'ordre des opérations?

Créer la ligne, l'ajouter au tableau.
Créer les cellules, les ajouter à la ligne.
Créer les text nodes, les ajouter aux cellules

[AlphonseBrown]

oui j'avais testé, je viens de trouver le souci. Le tableau doit avoir cette construction:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<thead>
<tr>
<th>Entete</th>
<th>Entete2</th>
</tr>
</thead>
<tbody id="conteneur">
<tr>
<td>Ligne ...</td>
<td>Ligne ...</td>
</tr>
</tbody>
</table>

et ça fonctionne!