Jump to main content
Menu

Working with Tables using the DOM

DOM Methods / Properties for Tables

Table Rows

Method / Property Description Applied To Code Example
rows[] Rows are stored in a dynamic node list, with the first row in position 0. <table> tableElementRef.rows[2]
rowIndex Returns the index number of a <tr></tr> element node, based on all the rows in the table. <tr> trElementRef.rowIndex
sectionRowIndex Returns the index number of the selected row, with the numbering relative to the table section (thead, tbody, tfoot) in which it is located, rather than relative to all the rows in the table (which is how rowIndex functions). <tr> trElementRef.sectionRowIndex
insertRow() Creates a row at the index value indicated.
  • <table>
  • <thead>
  • <tbody>
  • <tfoot>
 elementRef.insertRow(5);
deleteRow() Deletes the selected row in the table, based on the index value of that row. <table> tableElementRef.deleteRow(5);

Table Cells

Method / Property Description Applied To Code Example
cells[] Dynamic node list of cells in a row; the first cell is at position 0.

Requires specification of rows[] node list also, in order to track down the cell.

 <tr> trElementRef.rows[1].cells[0]
cellIndex Must be applied to a <td></td> or <th></th> element.

Returns the index number of the selected cell in that table row (the first cell is indexed at position 0).
  • <th>
  • <td>
 cellElementRef.cellIndex
insertCell() Creates a cell at the specified index value in that row. <tr> trElementRef.insertCell(4);
deleteCell() Deletes a selected cell in a table, based on the index value of that cell in the specified row. <tr> trElementRef.deleteCell(1);

Table Captions

All are referenced from a <table> element node.

Method / Property Description Code Example
caption Reading and writing the <caption></caption> text content of a table.

If one is not already in the structural markup code, it will need to be created via createCaption().		 tableElementRef.caption
createCaption() Creates a table caption and stores that in a variable. const newCaption = tableElementRef.createCaption();
deleteCaption() Deletes the caption from a table. tableElementRef.deleteCaption();

Table Sections

All are referenced from a <table> element node.

Method / Property Description Code Example
tHead Accesses the <thead></thead>. tableElementRef.tHead
tFoot Accesses the <tfoot></tfoot>. tableElementRef.tFoot
tBodies[] Accesses the table body indicated, with the first one in position 0. tableElementRef.tBodies[0]
deleteTFoot() Deletes the table footer section. tableElementRef.deleteTFoot();
deleteTHead() Deletes the table header section. tableElementRef.deleteTHead();

Recommendations for Tables

Revealing an Entire Table or Cell After Hiding Them

  • When disabling display for an entire table and then showing the table again, be careful how you set the display property.
  • If you choose a display value such as 'block' or 'inline', the table will not look the same when it is shown again. Cells will not be the same widths as when they originally were shown.
  • The acceptable options here are:
    • If you are working with inline CSS (such as the style property in the DOM), using tableElementRef.style.display='' should work fine and have the automatic rendering algorithm of the browser be used.
    • Or remove the class or id that was setting display:none, if that was the approach taken to hiding the table.
    • You could also go with display: table for the table element node, but be sure to check that the rendering remains consistent across the target browsers.

Indexing of Rows

  • If you are counting rows (e.g., to avoid altering something in <thead> you want to skip those rows), you can run into problems with rows inside <tfoot>.
  • Most browsers consider those rows to be at the bottom of the table, because that is where they render.
  • However, some browsers could consider them to be right where they are in the structural markup, regardless of where they render (and that means that browsers might consider them to be in different places, since <tfoot> is allowed to follow <thead> and precede the first <tbody>).
  • While this may prove to be a non-issue, it's worth testing for issues cross-browser if you have your tfoot before your first tbody.

Highlighting Headers

Mouse over the table to see the highlighting.

See the Pen Highlighting Column and Row Headers by Jason Withrow (@jwithrow) on CodePen.

Modifying Captions and Rows

Use the buttons below the table to modify the caption and the 'Delete' links to delete rows.

See the Pen Modifying Captions and Rows by Jason Withrow (@jwithrow) on CodePen.