Discussion :

[Setsuna_00]

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 :

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

[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

[Bovino]

Voir aussi la contribution de SpaceFrog à ce sujet !

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

[Setsuna_00]

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

[Setsuna_00]

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

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
 
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.";

[nod__]

je dirais même plus

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
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.";
    }