HTMLTableElement.insertRow()

  • Revision slug: Web/API/HTMLTableElement.insertRow
  • Revision title: HTMLTableElement.insertRow
  • Revision id: 408169
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Moved From Web/API/table.insertRow to Web/API/HTMLTableElement.insertRow

Revision Content

{{DomRef}}

Summary

insertRow inserts a new row in the table.

Syntax

var row = HTMLTableElement.insertRow(optional index = 1);
  • HTMLTableElement is a reference to a HTML table element.
  • index is the row index of the new row.
  • row is assigned a reference to the new row.
    If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.
  • If a table has multiple tbody elements, by default, the new row is inserted into the last tbody. To insert the row into a specific tbody:
    var specific_tbody=document.getElementById(tbody_id);
    var row=specific_tbody.insertRow(index)

Example

<table id="TableA">
<tr>
<td>Old top row</td>
</tr>
</table>
<script type="text/javascript">

function addRow(tableID) {
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

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

// Call addRow() with the ID of a table
addRow('TableA');

</script>

To be valid in an HTML document, a TR must have at least one TD element.

Note that insertRow inserts the row directly into the table and returns a reference to the new row. The row does not need to be appended separately as would be the case if document.createElement() had been used to create the new TR element.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4 3 5.5 10.10 4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Gecko-specific notes

  • Starting with Gecko 20.0 {{geckoRelease("20.0")}} the index argument has been made optional and defaults to -1 as per HTML specification.

Specification

Revision Source

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><code>insertRow</code> inserts a new row in the table.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
var <em>row</em> = <em>HTMLTableElement</em>.insertRow(<em>optional index = 1</em>);</pre>
<ul>
  <li><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a> is a reference to a HTML table element.</li>
  <li><code>index</code> is the row index of the new row.</li>
  <li><code>row</code> is assigned a reference to the new row.<br />
    If <code>index</code> is -1 or equal to the number of rows, the row is appended as the last row. If <code>index</code> is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.</li>
  <li>If a table has multiple <code>tbody</code> elements, by default, the new row is inserted into the last <code>tbody</code>. To insert the row into a specific <code>tbody</code>:<br />
    <code>var <em>specific_tbody</em>=document.getElementById(<em>tbody_id</em>);<br />
    var <em>row</em>=specific_tbody.insertRow(<em>index</em>)</code></li>
</ul>

<h2 id="Example" name="Example">Example</h2>
<pre class="brush:html">
&lt;table id="TableA"&gt;
&lt;tr&gt;
&lt;td&gt;Old top row&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;script type="text/javascript"&gt;

function addRow(tableID) {
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

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

// Call addRow() with the ID of a table
addRow('TableA');

&lt;/script&gt;</pre>
<p>To be valid in an HTML document, a TR must have at least one TD element.</p>
<p>Note that <code>insertRow</code> inserts the row directly into the table and returns a reference to the new row. The row does not need to be appended separately as would be the case if <code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement()</a></code> had been used to create the new TR element.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</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>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</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">Gecko-specific notes</h3>
<ul>
  <li>Starting with Gecko 20.0 {{geckoRelease("20.0")}} the index argument has been made optional and defaults to -1 as per HTML specification.</li>
</ul>
<h2 id="Specification" name="Specification">Specification</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>
Revert to this revision