Ajouter une ligne dans un tableau

17 juin 2007, 15:20

Salut à tous !

J'arrive pô à trouver comment insérer un simple

      <tr>
          <td></td>
      </tr>

dans un <div id="salut"></div>, dynamiquement avec un javascript...

La méthode du

Code : Tout sélectionner

document.getElementById("salut" ).innerHTML += "<tr><td>Test</td></tr>";

ne semble pas marcher... En fait ça m'affiche le texte "Test" avant le tableau (et ma balise <div> est aussi déplacée

), et le <tr><td></td></tr> ne s'affiche tout simplement pas...
Je suis perdu

Help me

Bonne journée

17 juin 2007, 16:15

Il faut peut être aussi mettre la balise <table> pour construire ton tableau...

18 juin 2007, 18:29

J'adore ^^ Merci de ne pas me prendre pour un abruti complet, les balises <table></table> sont bien sûr présentes...
Le <div> est disposé comme ça:

Code : Tout sélectionner

<table>
  <tr>
    <td>
    </td>
  </tr>
  <div>
  </div>
</table>

Et il faut que j'y insère

Code : Tout sélectionner

    <tr>
      <td>
      </td>
    </tr>

. . .

18 juin 2007, 19:02

On va commencer par un point important : le code avec un div en dehors d'un <td> n'est pas un code HTML conforme, il est encore moins valide bien entendu.

D'autre part, où est donc l'élément donc l'attribut id est "salut"

18 juin 2007, 19:42

C'est le div en question.

On m'a orienté sur ceci:

Code : Tout sélectionner

< table id="monTableau">
...
< /table>

avec

Code : Tout sélectionner

 
var tableau = document.getElementById("monTableau" );
var ligne = document.createElement("tr" );
var cellule = document.createElement("td" );
var texte = document.createTextNode("Du texte" );
 
cellule.appendChild(texte);
 
ligne.appendChild(cellule);
ligne.appendChild(cellule);
 
tableau.appendChild(ligne);

Ca marche, mais la ligne et la cellule sont ajoutées à la fin du tableau (alors que je voudrais les mettres entre deux lignes), et j'aimerai pouvoir attribuer un class sur mon <td>...

Comment faire ?

18 juin 2007, 19:48

Alors utilise un <tbody> pour encadrer les lignes au bout desquelles vont se rajouter les lignes dynamiques et mets-y un attribut id pour pointer dessus. Même si d'autres lignes suivent le <tbody>, les nouvelles lignes resteront à l'intérieur.

Note : dans un tableau HTML, on ne peut avoir qu'un seul et unique <thead> et un seul <tfoot>, mais on peut avoir plusieurs <tbody> ce qui dans ce cas précis est particulièrement pratique. Mais attention, pas de <tbody></tbody> vide : donc tu peux y avoir au départ la première ligne contenant par exemple le titres des colonnes.

18 juin 2007, 21:09

En laissant le <tbody></tbody> vide, y'a pas de problème (en tout cas au niveau de l'affichage, je verrai avec le w3c après), néanmoins mon problème de class sur le td n'est pas résolu...
Il faudrait par exemple:

Code : Tout sélectionner

<td class="mon_style"></td>

18 juin 2007, 22:49

Utilise la méthode setAttribute('class', 'mon_style'). Avec IE, il faut, sauf erreur de ma part utiliser une autre méthode en mettant (de mémoire) quelque chose comme :

var cell = createElement('td');
cell.className = 'mon_style';

Tu trouveras de la documentation sur SelfHTML sur le sujet

Ajouter une ligne dans un tableau

Qui est en ligne