Javascript / OnMouseover / Table Row Color Change
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:
General Details
Snippet uploaded by: snippet
Email : webmaster@snippetlibrary.com
Snippet By: Unknown
<!---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>
<!---Body--->
<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>
No Reviews to show
