[DOM] Générer un tableau avec innerHTML

Version imprimable

Bonjour,
J'ai commencé la mise en place d'un petit formulaire en php/ajax qui ajoute des articles en promos sans recharger la page.
Mon problème a commencé lorsque j'ai voulu insérer mes enregistrements dans un tableau au fur et a mesure que l'utilisateur entre des articles et que la requete d'ajout fonctionne.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var n = 0; function ecrire_tableau(lib, colis, stock) { if(n == 0) { //Ecriture de l'entete du tableau document.getElementById('ajax_ajouts').innerHTML = '<table border="1"> <tr> <th>Libelle</th> <th>Quantité par colis</th> <th>Quantité en stock</th> </tr>'; //Ecriture du premier ajout document.getElementById('ajax_ajouts').innerHTML += "<tr> <td>"+lib+"</td> <td>"+colis+"</td> <td>"+stock+"</td> </tr>"; n++; } else { //Ecriture du n-ième ajout document.getElementById('ajax_ajouts').innerHTML += "<tr> <td>"+lib+"</td> <td>"+colis+"</td> <td>"+stock+"</td> </tr>"; n++; } }
J'explique le problème: Lorsqu'un enregistrement s'ajoute, il s'affiche bien mais en dehors du tableau. De plus, dans le tableau je n'ai que la première ligne avec les balises <th> qui s'affiche correctement avec des bordures.

08/06/2009, 14h37
nod__

Ouch, tu veux pas utiliser innerHTML pour manipuler les tableaux. Ça bug dans IE.

il vaut mieux utiliser le DOM http://www.quirksmode.org/dom/w3c_html.html#tables
Les pages de test montrent des exemples d'utilisation de tout ça :)
08/06/2009, 14h44
Bovino

Voir aussi la contribution de SpaceFrog à ce sujet !
08/06/2009, 14h51
nod__

j'ai un faible pour insertRow() et insertCell() puisque ça rend plus court le code, beaucoup plus lisible aussi. Et tout le monde l'implémente, c'est la fête \o/
08/06/2009, 15h08
Setsuna_00

merci beaucoups, comme je pensait va falloir que je me mette au DOM :'(
C'est le début des ennuies :lol:.
Bref, je vous tient au courant!

C'est bon!
Avec les exemples c'était pas si compliqué que ca.
voici mon code pour les intéréssés:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var nb = 0;
function ecrire_tableau(lib, colis, stock)
{
if(nb == 0) document.getElementById('ajax_ajouts').style.display = "";
var x = document.getElementById('ajouts');
var y = x.insertRow(1);
var z = document.createElement('td');
z.appendChild(document.createTextNode(lib));
y.appendChild(z);
var z = document.createElement('td');
z.appendChild(document.createTextNode(colis));
y.appendChild(z);
var z = document.createElement('td');
z.appendChild(document.createTextNode(stock));
y.appendChild(z);
nb++;
document.getElementById('ajax_ajouts').innerHTML += nb+" enregistrement(s) insérés.";

je dirais même plus

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var nb = 0;
    function ecrire_tableau(lib, colis, stock)
    {
        if(nb == 0) {document.getElementById('ajax_ajouts').style.display = "";}
        var x = document.getElementById('ajouts');
        var y = x.insertRow(x.rows.length);
        // var z = y.insertCell(0);
        // z.appendChild(document.createTextNode(lib));
        // et on peut même remplacer ces deux lignes directement par : 
        y.insertCell(0).appendChild(document.createTextNode(lib));
        y.insertCell(1).appendChild(document.createTextNode(colis));
        y.insertCell(2).appendChild(document.createTextNode(stock));
 
        nb++;
        document.getElementById('ajax_ajouts').innerHTML += nb+" enregistrement(s) insérés.";
    }