Comment insérer une ligne dans un corps de tableau HTML en JavaScript

Question

J'ai un tableau HTML avec un en-tête et un pied de page :

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

J'essaie d'ajouter une ligne dans tbody avec les éléments suivants :

myTable.insertRow(myTable.rows.length - 1);

mais la ligne est ajoutée dans le tfoot section.

Comment puis-je insérer tbody ?

Answer 1

Si vous voulez ajouter une ligne dans le tbody obtenir une référence à ce dernier et appeler son insertRow méthode.

var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row at the end of table
var newRow = tbodyRef.insertRow();

// Insert a cell at the end of the row
var newCell = newRow.insertCell();

// Append a text node to the cell
var newText = document.createTextNode('new row');
newCell.appendChild(newText);

<table id="myTable">
  <thead>
    <tr>
      <th>My Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>initial row</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>My Footer</td>
    </tr>
  </tfoot>
</table>

(vieux Démonstration sur JSFiddle)

Answer 2

Vous pouvez essayer l'extrait suivant en utilisant jQuery :

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");

Answer 3

Approche de base :

Cela devrait ajouter du contenu au format HTML et afficher la ligne nouvellement ajoutée.

var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;

Answer 4

Vous êtes proche. Il suffit d'ajouter la ligne à la tbody au lieu de table :

myTbody.insertRow();

Il suffit d'obtenir une référence à tBody ( myTbody ) avant de l'utiliser. Notez que vous n'avez pas besoin de passer la dernière position dans un tableau ; elle est automatiquement positionnée à la fin en omettant l'argument.

Une démonstration en direct est disponible à l'adresse suivante : jsFiddle .

Answer 5

Je pense que ce script est exactement ce dont vous avez besoin.

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)