Ajouter une cellule à un tableau avec div

**DarkPoster14** · 21/05/2012, 11h34

Bonjour à tous,

Je voudrais faire en html un tableau dynamique qui ajoute des éléments sur un évènement OnClick sur un boutton.

Voici un échantillon de mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<table>
<tr>
    <td>cellulle 1</td>
    <td>cellulle 2</td>
    <td>cellulle 3</td>
</tr>
<div id="nouvelle_ligne">
</div>
</table>
 
<input type = "button" value= "Ajouter element" OnClick = "AjouterElement()">

en javascript ma fonction qui ajoute le nouvel élément est la suivante :

Code :

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

1
2
3
4
5
6
7
8
 
<script>
function AjouterElement()
{
 var data = "<tr><td>cellulle 4</td><td>cellulle 5</td><td>cellulle 6</td></tr>";
 document.getElementById("nouvelle_ligne").innerHTML += data;
}
</script>

Le problème c'est que ce code n'ajoute pas cette ligne au tableau mais elle l'ajoute à la page au dessus du tableau.

Comment pourrais-je faire pour l'ajouter à la fin du tableau.

Merci d'avance de votre aide.

**SpaceFrog** · 21/05/2012, 11h36

une piste
http://www.developpez.net/forums/d47...us-rapidement/

**DarkPoster14** · 21/05/2012, 12h16

Merci encore SpaceFrog, on apprend beaucoup avec toi,

C'est une bonne solution, mais dans mon cas ce tableau est dynamique et il change périodiquement, suppression, addition, modification d’éléments dans le tableau, etc ...

Par conséquent, cette méthode me parait lourde parce que si je charge ce tableau à chaque fois, surtout que j'envoie des requête http pour remplir chaque ligne du tableau. j'aurais des problème au niveau performance et temps d'affichage.

moi ce que je voudrais faire c'est modifier une partie du tableau, notamment avec un div.