X Table Toys
Description
This page is a test for three new X functions:
xTableRowDisplay(),
xTableCellVisibility() and xTableColDisplay().
Demo 1: xTableRowDisplay()
Click a row in one table to toggle the display of the same row in the
other table.
Table 1
| Col 0 | Col 1 |
|---|
| [Row0, Col0] | [Row0, Col1] |
| [Row1, Col0] | [Row1, Col1] |
| [Row2, Col0] | [Row2, Col1] |
| [Row3, Col0] | [Row3, Col1] |
Table 2
| Col 0 | Col 1 |
|---|
| [Row0, Col0] | [Row0, Col1] |
| [Row1, Col0] | [Row1, Col1] |
| [Row2, Col0] | [Row2, Col1] |
| [Row3, Col0] | [Row3, Col1] |
Demo 2: xTableCellVisibility()
Click a cell in one table to toggle the visibility of the same cell in
the other table.
Table 3
| Col 0 | Col 1 |
|---|
| [Row0, Col0] | [Row0, Col1] |
| [Row1, Col0] | [Row1, Col1] |
| [Row2, Col0] | [Row2, Col1] |
| [Row3, Col0] | [Row3, Col1] |
Table 4
| Col 0 | Col 1 |
|---|
| [Row0, Col0] | [Row0, Col1] |
| [Row1, Col0] | [Row1, Col1] |
| [Row2, Col0] | [Row2, Col1] |
| [Row3, Col0] | [Row3, Col1] |
Demo 3: xTableColDisplay()
Click a column heading in one table to toggle the display of the same
column in the other table.
Table 5
| Col 0 | Col 1 |
|---|
| [Row0, Col0] | [Row0, Col1] |
| [Row1, Col0] | [Row1, Col1] |
| [Row2, Col0] | [Row2, Col1] |
| [Row3, Col0] | [Row3, Col1] |
Table 6
| Col 0 | Col 1 |
|---|
| [Row0, Col0] | [Row0, Col1] |
| [Row1, Col0] | [Row1, Col1] |
| [Row2, Col0] | [Row2, Col1] |
| [Row3, Col0] | [Row3, Col1] |
Notes
- Only the section (TABLE, THEAD or TBODY) element needs an ID, the rows
don't need IDs.
- You don't have to hard-code the number of rows anywhere.
- You don't have to make assignments to the onmouseover, onmouseout and
onclick attributes in the HTML.
- It won't throw errors (or do anything) in browsers that don't support the
features it needs or that have Javascript disabled.
- Tested on Win2K with Opera 7.51, Moz 1.7 and IE 6.0. Opera had some
screen-redraw problems. This demo may not work in Safari v1.2 and may only
partially work in IE 5.2 Mac.