Entry
How can I change the background color of a table column onmouseover?
Jun 13th, 2002 08:45
Martin Honnen,
The following has been tested to work with IE6 and NN6.2. It should
work with IE4+ and NN6+.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
table columns
</title>
<style type="text/css">
col.yellow { background-color: yellow; }
</style>
<script type="text/javascript">
function colorColumn (table, backgroundColor, evt) {
if (window.event) {
var srcElement = event.srcElement;
while (srcElement && typeof srcElement.cellIndex == 'undefined' )
srcElement = srcElement.parentElement;
if (srcElement) {
table.lastColumn = table.all.tags('col').item
(srcElement.cellIndex);
table.lastBackgroundColor =
table.lastColumn.style.backgroundColor;
table.lastColumn.style.backgroundColor = backgroundColor;
}
}
else if (evt.target) {
var srcElement = evt.target;
while (srcElement && typeof srcElement.cellIndex == 'undefined')
srcElement = srcElement.parentNode;
if (srcElement) {
table.lastColumn = table.getElementsByTagName('col').item
(srcElement.cellIndex);
table.lastBackgroundColor =
table.lastColumn.style.backgroundColor;
table.lastColumn.style.backgroundColor = backgroundColor;
}
}
}
function restoreColumn (table) {
if (table.lastColumn)
table.lastColumn.style.backgroundColor = table.lastBackgroundColor;
}
</script>
</head>
<body>
<table border="1"
onmouseover="colorColumn(this, 'yellow', event);"
onmouseout="restoreColumn(this);"
>
<col style="background-color: lightblue;" />
<col style="background-color: lightgreen;" />
<tbody>
<tr>
<td>
0, 0
</td>
<td>
0, 1
</td>
</tr>
<tr>
<td>
1, 0
</td>
<td>
1, 1
</td>
</tr>
</tbody>
</table>
<table border="1"
onmouseover="colorColumn(this, 'lightblue', event);"
onmouseout="restoreColumn(this);"
>
<col class="yellow" />
<col />
<col />
<tbody>
<script type="text/javascript">
var html = '';
for (var r = 0; r < 10; r++) {
html += '<tr>';
for (var c = 0; c < 3; c++)
html += '<td>' + r + ', ' + c + ' Kibology<\/td>';
html += '<\/tr>';
}
document.write(html);
</script>
</tbody>
</table>
</body>
</html>
