Not a Member Yet,
Click here to Register
How do you like the new design?






ID: 34
Viewed: 5172
Added: Nov 23, 2001
Version:
Snippet uploaded by: snippet
Written By: Unknown
Demo: View Demo



User Rated at: 0 Stars
Rate This:

Thank you for your vote. Please wait...

It appears you already voted for this snippet

It appears your vote value was empty

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:

<!---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 Comments to show

Please completely fill out the form below if you want to review this snippet. All reviews are subject to validation.


Replying to a Comment...


Adding your comment. Please wait...

Thanks for adding your comment!. After further review it will be added.

There was a problem adding your comment. Please try again.

Please complete all the fields in the form before sending.

© 2002 - 2017 snippetlibrary.com All Rights Reserved. Conditions