Highlight tr onMouseOver
Hej.Jeg har fundet dette script, som kan noget af det, jeg søger. Det ændrer baggrundsfarven på table rows ved hover:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
p, td, th {
font: 0.8em Arial, Helvetica, sans-serif;
}
.tabdata {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 80%;
}
.tabdata tr {
background-color: #FFFFFF;
}
.tabdata td {
border: 1px solid #D6DDE6;
padding: 4px;
color: #000000;
}
.tabdata th {
border: 1px solid #828282;
background-color: #BCBCBC;
font-weight: bold;
text-align: left;
padding-left: 4px;
color: #000000;
}
.tabdata tr.altrow {
background-color: #DFE7F2;
}
.tabdata tr:hover, .tabdata tr.hilite {
background-color: #CFD7E2;
}
</style>
<script type="text/javascript">
/***********************************************
* Highlight Table Cells Script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TR"
var ns6=document.getElementById&&!document.all
var ie=document.all
function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}
function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
</script>
</head>
<body>
<table class="tabdata" onMouseover="changeto(event, 'lightgreen')" onMouseout="changeback(event, 'white')">
<tr>
<th scope="col">Employee Name</th>
<th scope="col">Department</th>
<th scope="col">Date of Birth</th>
<th scope="col">Year Hired</th>
</tr>
<tr>
<td>John Doe</td>
<td>Marketing</td>
<td>23/05/1981</td>
<td>2001</td>
</tr>
<tr class="altrow">
<td>Bruce Porter</td>
<td>Security</td>
<td>18/08/1973</td>
<td>1998</td>
</tr>
<tr>
<td>Kate Simpson</td>
<td>Human Resources</td>
<td>19/03/1982</td>
<td>2004</td>
</tr>
<tr class="altrow">
<td>Bill McCormick</td>
<td>Technology</td>
<td>12/06/1964</td>
<td>1999</td>
</tr>
<tr>
<td>John Hazlewood</td>
<td>Management</td>
<td>13/03/1963</td>
<td>Fired</td>
</tr>
<tr class="altrow">
<td>Patrick Mouse</td>
<td>Technology</td>
<td>24/08/1964</td>
<td>2000</td>
</tr>
<tr>
<td>Ronald Simpson</td>
<td>Technology</td>
<td>13/03/1982</td>
<td>2003</td>
</tr>
</table>
</body>
</html>
Problemet er, at når musen fjernes fra en <tr> så ændres farven til hvid. Ovenstående er en test; normalt genereres mine tables dynamisk (via et perl-script) og får automatisk en baggrundsfarve på hver anden <tr> så jeg kunne godt tænke mig at den oprindelige farve - og ikke hvid - kom tilbage ved mouseOut. Kan det lade sig gøre i scriptet?
Mvh.
