table.insertRow

  • Raccourci de la révision : DOM/table.insertRow
  • Titre de la révision : table.insertRow
  • ID de la révision : 390501
  • Créé :
  • Créateur : Restimel
  • Version actuelle ? Oui
  • Commentaire forget to translate function name in example

Contenu de la révision

{{DomRef}}

Résumé

insertRow ajoute une nouvelle ligne dans une table.

Syntaxe

var ligne = HTMLTableElement.insertRow(optionel index = -1);
  • HTMLTableElement est une référence à un élément HTML table.
  • index est l'index de ligne de la nouvelle ligne.
  • ligne contiendra la référence à l'élément HTML de la nouvelle ligne.
    Si l'index est -1 ou est égal au nombre de lignes, la ligne est ajoutée à la dernière place. Si index est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si index n'est pas précisé, sa  valeur par défaut sera -1.
  • Si une table a plusieurs éléments tbody, par défaut, la nouvelle ligne est ajoutée dans le dernier tbody. Pour ajouter une ligne à un tbody en particulier:
    var specific_tbody=document.getElementById(tbody_id);
    var ligne=specific_tbody.insertRow(index)

Exemple

<table id="TableA">
<tr>
<td>Ancienne ligne en haut</td>
</tr>
</table>
<script type="text/javascript">

function ajouteLigne(tableID) {
  // Récupération d'une reference à la table
  var tableRef = document.getElementById(tableID);

  // Ajoute une ligne dans la table à la position 0
  var nouvelleLigne   = tableRef.insertRow(0);

  // Ajoute une cellule dans la ligne à la position 0
  var nouvelleCellule  = nouvelleLigne.insertCell(0);

  // Ajoute un noeud text à la cellule
  var nouveauTexte  = document.createTextNode('Nouvelle ligne en haut')
  nouvelleCellule.appendChild(nouveauTexte);
}

// Appelle ajouteLigne() avec l'ID d'une table
ajouteLigne('TableA');

</script>

Pour être valide dans un document HTML, un élement TR doit avoir au moins un élément TD.

Remarquez que insertRow ajoute directement la ligne dans la table et renvoie une référence à cette nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme c'est le cas quand document.createElement() est utilisé pour créer un nouvel élement TR.

Support des Navigateurs

{{CompatibilityTable}}
Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 4 3 5.5 10.10 4
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Notes spécifique à Gecko

  • À partir de la version Gecko 20.0 {{geckoRelease("20.0")}} l'argument index a été rendu optionnel et vaut par défaut -1 comme dans les spécifications HTML.

Spécification

Source de la révision

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">Résumé</h2>
<p><code>insertRow</code> ajoute une nouvelle ligne dans une table.</p>
<h2 id="Syntax" name="Syntax">Syntaxe</h2>
<pre class="syntaxbox">
var <em>ligne</em> = <em>HTMLTableElement</em>.insertRow(<em>optionel index = -1</em>);</pre>
<ul>
  <li><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément HTML table.</li>
  <li><code>index</code> est l'index de ligne de la nouvelle ligne.</li>
  <li><code>ligne</code> contiendra la référence à l'élément HTML de la nouvelle ligne.<br />
    Si l'index est -1 ou est égal au nombre de lignes, la ligne est ajoutée à la dernière place. Si <code>index</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si index n'est pas précisé, sa&nbsp; valeur par défaut sera -1.</li>
  <li>Si une table a plusieurs éléments <code>tbody</code>, par défaut, la nouvelle ligne est ajoutée dans le dernier <code>tbody</code>. Pour ajouter une ligne à un<code> tbody en particulier</code>:<br />
    <code>var <em>specific_tbody</em>=document.getElementById(<em>tbody_id</em>);<br />
    var ligne=specific_tbody.insertRow(<em>index</em>)</code></li>
</ul>
<h2 id="Example" name="Example">Exemple</h2>
<pre class="brush:html">
&lt;table id="TableA"&gt;
&lt;tr&gt;
&lt;td&gt;Ancienne ligne en haut&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;script type="text/javascript"&gt;

function ajouteLigne(tableID) {
  // Récupération d'une reference à la table
  var tableRef = document.getElementById(tableID);

  // Ajoute une ligne dans la table à la position 0
  var nouvelleLigne   = tableRef.insertRow(0);

  // Ajoute une cellule dans la ligne à la position 0
  var nouvelleCellule  = nouvelleLigne.insertCell(0);

  // Ajoute un noeud text à la cellule
  var nouveauTexte  = document.createTextNode('Nouvelle ligne en haut')
  nouvelleCellule.appendChild(nouveauTexte);
}

// Appelle ajouteLigne() avec l'ID d'une table
ajouteLigne('TableA');

&lt;/script&gt;</pre>
<p>Pour être valide dans un document HTML, un élement TR doit avoir au moins un élément TD.</p>
<p>Remarquez que <code>insertRow</code> ajoute directement la ligne dans la table et renvoie une référence à cette nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme c'est le cas quand <code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement()</a></code> est utilisé pour créer un nouvel élement TR.</p>
<h2 id="Support_des_Navigateurs">Support des Navigateurs</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>4</td>
        <td>3</td>
        <td>5.5</td>
        <td>10.10</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Notes spécifique à Gecko</h3>
<ul>
  <li>À partir de la version Gecko 20.0 {{geckoRelease("20.0")}} l'argument index a été rendu optionnel et vaut par défaut -1 comme dans les spécifications HTML.</li>
</ul>
<h2 id="Specification" name="Specification">Spécification</h2>
<ul>
  <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903">DOM Level 2 HTML: insertRow</a></li>
  <li>HTML Living Standard: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#dom-table-insertrow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#dom-table-insertrow">HTMLTableElement.insertRow</a></li>
</ul>
Revenir à cette révision