Cross-Browser.com

This demo shows two uses of xTableSync: (1) A syncronized mouseover/out effect. (2) Click on a TD in either table and it's contents get assigned to the corresponding TD in the other table.

t1r1c0	t1r1c1	t1r1c2	t1r1c3	t1r1c4	t1r1c5	t1r1c6	t1r1c7	t1r1c8	t1r1c9
t1r2c0	t1r2c1	t1r2c2	t1r2c3	t1r2c4	t1r2c5	t1r2c6	t1r2c7	t1r2c8	t1r2c9
t1r3c0	t1r3c1	t1r3c2	t1r3c3	t1r3c4	t1r3c5	t1r3c6	t1r3c7	t1r3c8	t1r3c9
t1r4c0	t1r4c1	t1r4c2	t1r4c3	t1r4c4	t1r4c5	t1r4c6	t1r4c7	t1r4c8	t1r4c9
t1r5c0	t1r5c1	t1r5c2	t1r5c3	t1r5c4	t1r5c5	t1r5c6	t1r5c7	t1r5c8	t1r5c9
t1r6c0	t1r6c1	t1r6c2	t1r6c3	t1r6c4	t1r6c5	t1r6c6	t1r6c7	t1r6c8	t1r6c9

T2R1C0	T2R1C1	T2R1C2	T2R1C3	T2R1C4	T2R1C5	T2R1C6	T2R1C7	T2R1C8	T2R1C9
T2R2C0	T2R2C1	T2R2C2	T2R2C3	T2R2C4	T2R2C5	T2R2C6	T2R2C7	T2R2C8	T2R2C9
T2R3C0	T2R3C1	T2R3C2	T2R3C3	T2R3C4	T2R3C5	T2R3C6	T2R3C7	T2R3C8	T2R3C9
T2R4C0	T2R4C1	T2R4C2	T2R4C3	T2R4C4	T2R4C5	T2R4C6	T2R4C7	T2R4C8	T2R4C9
T2R5C0	T2R5C1	T2R5C2	T2R5C3	T2R5C4	T2R5C5	T2R5C6	T2R5C7	T2R5C8	T2R5C9
T2R6C0	T2R6C1	T2R6C2	T2R6C3	T2R6C4	T2R6C5	T2R6C6	T2R6C7	T2R6C8	T2R6C9

/*
xTableSync(sT1Id, sT2Id, sEvent, fn)
sT1Id, sT2Id - table id strings.
sEvent - event type string ('click', 'mouseover', etc).
fn - callback function, called when sEvent occurs on a TD in either table.
     fn(td1, td2)
     td1 - the TD which received the event.
     td2 - the corresponding TD in the other table.
*/

xAddEventListener(window, 'load',
  function() {
    xTableSync('table1', 'table2', 'click', tblClick);
    xTableSync('table1', 'table2', 'mouseover', tblMOver);
    xTableSync('table1', 'table2', 'mouseout', tblMOut);
  }, false
);
function tblClick(td1, td2)
{
  td2.innerHTML = td1.innerHTML;
}
function tblMOver(td1, td2)
{
  td1.className = 'tdOver';
  td2.className = 'tdOver';
}
function tblMOut(td1, td2)
{
  td1.className = 'tdOut';
  td2.className = 'tdOut';
}

More Table Toys.