X Table Toys

Description

This page is a test for some of the xTable functions. View their source:
xTableRowDisplay, xTableCellVisibility, xTableColDisplay, xTableCursor and xTableIterate.
For an example of usage view the source of this page.

Demo 1: xTableRowDisplay()

Click a row in one table to toggle the display of the same row in the other table.

View xTableRowDisplay

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.

View xTableCellVisibility

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.

View xTableColDisplay

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]

Demo 4: xTableCursor()

A row and cell mouseover cursor for tables.

The xTableCursor demo now has its own page.

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.

Related Demos

xTable

More Table Cursors

xTableSync

xTableHeaderFixed

License

By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Tech Support

Forum support is available at the X Library Support Forums.

Cross-Browser.com