Entry
How to script a mouseover/out/click event for a table row?
How to script a mouseover/out/click event for a table row?
Feb 12th, 2000 17:13
Martin Honnen,
This faqt builds on
http://www.faqts.com/knowledge-base/view.phtml/aid/979/fid/53/lang/en
which already explains how to set up event handling for table cells.
Again IE4/5 and NN6 simply provide the event handler for the TR element
so
<TR ONMOUSEOVER="this.bgColor = 'lime'"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
works.
Again NN4 doesn't support any event handlers for the TR element but the
code already provided for TD elements just needs handlers set up which
handle the complete row. Here is an example setting onclick bgColor
change for a row:
<HTML>
<HEAD>
<SCRIPT>
if (document.layers)
document.write('<STYLE>TD.cell { position: relative; } <\/STYLE>');
</SCRIPT>
<SCRIPT>
function initTableLayers (tableName, rows, cols) {
if (document.layers) {
var maxHeight = new Array (rows);
var maxWidth = new Array (cols);
for (var r = 0; r < rows; r++)
maxHeight[r] = 0;
for (var c = 0; c < cols; c++)
maxWidth[c] = 0;
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
if (maxHeight[r] < cell.clip.height)
maxHeight[r] = cell.clip.height;
}
for (var c = 0; c < cols; c++)
for (var r = 0; r < rows; r++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
if (maxWidth[c] < cell.clip.width)
maxWidth[c] = cell.clip.width;
}
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
cell.clip.width = maxWidth[c];
cell.clip.height = maxHeight[r];
cell.rowIndex = r; cell.colIndex = c;
cell.tableName = tableName;
cell.cols = cols;
var ol = cell.ol = new Layer(maxWidth[c]);
ol.cell = cell;
ol.clip.height = maxHeight[r];
ol.left = cell.pageX;
ol.top = cell.pageY;
ol.visibility = 'show';
}
}
}
function initTableEventHandler (tableName, rows, cols, event, handler) {
if (document.layers) {
var cell0_0 = document[tableName + 'Cell0_0'];
if (!cell0_0.ol)
initTableLayers (tableName, rows, cols);
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
if (event.toLowerCase() == 'click')
cell.ol.captureEvents(Event.CLICK);
cell.ol['on' + event.toLowerCase()] = handler;
}
}
}
</SCRIPT>
<SCRIPT>
var activeRowIndex = -1;
var activeRow = null;
var highColor = 'lime'
function trClick (evt) {
if (activeRowIndex != -1)
for (var c = 0; c < this.cell.cols; c++)
document[this.cell.tableName + 'Cell' + activeRowIndex + '_' +
c].bgColor =
document.bgColor;
activeRowIndex = this.cell.rowIndex;
for (var c = 0; c < this.cell.cols; c++)
document[this.cell.tableName + 'Cell' + activeRowIndex + '_' +
c].bgColor = highColor;
}
function trClickDOM (row) {
if (activeRow)
activeRow.bgColor = document.bgColor;
activeRow = row;
activeRow.bgColor = highColor;
}
function init () {
initTableEventHandler ('table1', 3, 3, 'click', trClick);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<TABLE BORDER="1">
<TR ONCLICK="trClickDOM(this);">
<TD ID="table1Cell0_0" CLASS="cell">
Kibology
</TD>
<TD ID="table1Cell0_1" CLASS="cell">
for
</TD>
<TD ID="table1Cell0_2" CLASS="cell">
all
</TD>
</TR>
<TR ONCLICK="trClickDOM(this);">
<TD ID="table1Cell1_0" CLASS="cell">
Kibology
</TD>
<TD ID="table1Cell1_1" CLASS="cell">
for
</TD>
<TD ID="table1Cell1_2" CLASS="cell">
all
</TD>
</TR>
<TR ONCLICK="trClickDOM(this);">
<TD ID="table1Cell2_0" CLASS="cell" VALIGN="top">
Scriptology
</TD>
<TD ID="table1Cell2_1" CLASS="cell" VALIGN="top">
for
</TD>
<TD ID="table1Cell2_2" CLASS="cell">
all.
<BR>
All for Scriptology
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
