Table Basics - DOM - Refer to table cells

Get the values from a table with text boxes and select boxes.

Overview

The example below starts off with a header row, and one row of data. If you click "Get Cells From The Last Row", it will get the values from each of the cells in the data row. If you then click "Append", a new row is dynamically added. Click "Get Cells From The Last Row" again, and the new row's values are retrieved.

Try It

Text Input Text Select
1

Example Source

Public Domain

The JavaScript in tablebasics2.js is released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

The JavaScript

tablebasics2.js

Browser Compatibility

Tested in the Windows versions of Firefox 1.0.7, IE 6.0, and Opera 8.02.

Explanation

To get to a certain cell in a table, first a row is referenced using the DOM rows collection, then a cell is referenced using the DOM cells collection. To reference the contents of a cell, it will depend on what's in the cell. Cell 0 in the example contains a text node with no surrounding tags, so the text can be referenced with innerHTML. Cell 1 contains an input text element, and it is the firstChild in the cell, so that's how it's referenced. Cell 2 contains a select list, and is the firstChild for its cell.

HTML and the DOM

Various browsers handle the DOM in different ways, and in my example this affects the first (preexisting) row's table cells. While traversing the DOM, a browser such as Firefox 1.0.x will count whitespace as a text node, but Internet Explorer 6.0 won't count it as a node. On the other hand, a row that is added dynamically as is done in my function appendRow, will not include a text node in either browser.

If you want to test how your browser counts table cell whitespace, then refer to my DOM traverse script.

For the example on this page, I decided to format the HTML to avoid whitespace preceding the elements. That way I don't have to do any complicated logic in the javascript.

In the source of this page, refer to

    <td>1</td>
    <td><input type="text" id="txtRow1" size="40" value="t1" /></td>
    <td><select>
    <option value="value0">option zero</option>
    <option value="value1">option one</option>
    </select></td>

And in tablebasics2.js, in the getCells function, refer to the following line: 

outTxt1.value = tbl.rows[lastRow].cells[1].firstChild.value;

You'll notice that firstChild is used to get the first node in that cell. A DOM node call such as that would have been affected by the whitespace node.

Syntax References

rows collection

cells collection

Related mredkj.com Tutorials

  1. DOM table methods
  2. DOM - Refer to table cells
  3. innerHTML vs. DOM vs. cloneNode
  4. DOM Table Add Row
  5. DOM Table Delete Row
  6. DOM Table Delete Row - includes a calendar

For starters, I'd recommend [3], and if you've decided to use a DOM approach, then check out the simple examples of [1] and [2]. Then you could move on the extended examples in [4], [5], and [6]

About this page: