...

View Full Version : highlight row



nikko50
12-31-2006, 05:18 PM
Happy New Year to all!

I'm trying to highlight the row color with a style sheet and onmouseover event. I have this in my style sheet...

TABLE.sql2 tr.highlight {
background-color: #000080;
color: #ffffff;

And this in the <TR>

<tr onmouseover="this.sql2='highlight';"
onmouseout="this.sql2='';">

What am I doing wrong??

Mr J
12-31-2006, 07:05 PM
You could try something like this


<style type="text/css">

.highlight {
background-color: #000080;
color: #ffffff;
}

</style>

<table border="1">

<tr onmouseover="this.className='highlight'"onmouseout="this.className=''">
<td>Hello World</td>
</tr>

</table>

codingmasta
01-01-2007, 05:39 PM
sql???

Bill Posters
01-01-2007, 06:47 PM
Alternatively...


table.sql2 tr:hover {
background-color: #000080;
color: #fff;
}

If you want to support IE6, go with a suckerfish approach...

(rough) e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">

table {
margin: 0 0 30px;
}

table.sql tr:hover,
table.sql tr.highlight {
color: #f00;
background-color: #fc3;
}

</style>

<!--[if lt IE 7]>

<script type="text/javascript">

window.onload = function() {

var tableEls = document.getElementsByTagName('table');
for (var i=0, tableEl; tableEl=tableEls[i]; i++) {
if (tableEl.className && tableEl.className.indexOf('sql') != -1) {
var trEls = tableEl.getElementsByTagName('tr');
for (var t=0, trEl; trEl=trEls[t]; t++) {
trEl.onmouseover = function() { this.className = 'highlight'; }
trEl.onmouseout = function() { this.className = '' }
}
}
}

}

</script>

<![endif]-->
</head>
<body>

<table class="sql" cellpadding="10" cellspacing="0" border="1">
<caption>class="sql"</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>


<table cellpadding="10" cellspacing="0" border="1">
<caption>(no class)</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>


<table class="sql" cellpadding="10" cellspacing="0" border="1">
<caption>class="sql"</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum