X Table Toys

Description

This page is a test for 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 0Col 1
[Row0, Col0][Row0, Col1]
[Row1, Col0][Row1, Col1]
[Row2, Col0][Row2, Col1]
[Row3, Col0][Row3, Col1]
Table 2
Col 0Col 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 0Col 1
[Row0, Col0][Row0, Col1]
[Row1, Col0][Row1, Col1]
[Row2, Col0][Row2, Col1]
[Row3, Col0][Row3, Col1]
Table 4
Col 0Col 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 0Col 1
[Row0, Col0][Row0, Col1]
[Row1, Col0][Row1, Col1]
[Row2, Col0][Row2, Col1]
[Row3, Col0][Row3, Col1]
Table 6
Col 0Col 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.

View xTableCursor

r1c1r1c2r1c3r1c4r1c5r1c6r1c7
r2c1r2c2r2c3r2c4r2c5r2c6r2c7
r3c1r3c2r3c3r3c4r3c5r3c6r3c7
r4c1r4c2r4c3r4c4r4c5r4c6r4c7
r5c1r5c2r5c3r5c4r5c5r5c6r5c7
r6c1r6c2r6c3r6c4r6c5r6c6r6c7

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.

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.

Application Support

Get your questions answered faster by posting at one of the following forums.

SitePoint.com

HFTOnline.com

CodingForums.com

User Projects

If you are using X, CBE or anything from Cross-Browser.com, please let me know and I'll post a link to your work in Featured Sites.