Code Sample :
<html>
<head>
<title>Change
table row background colour on mouse over-move using JavaScript</title>
</head>
<body>
<table
align="center"
id="tblMain" style="border: solid 1px black;" cellpadding="0"
cellspacing="0" width="200px">
<th>
Heading
</th>
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
<tr>
<td>
Row 3
</td>
</tr>
<tr>
<td>
Row 4
</td>
</tr>
<tr>
<td>
Row 5
</td>
</tr>
<tr>
<td>
Row 6
</td>
</tr>
</table>
<script
language="javascript">
var tbl = document.getElementById("tblMain");
if (tbl !=
null) {
if (tbl.rows[0]
!= null) {
tbl.rows[0].style.backgroundColor = "#365890";
tbl.rows[0].style.color = "#FFFFFF";
}
for (var i = 1; i < tbl.rows.length;
i++) {
tbl.rows[i].style.cursor = "pointer";
tbl.rows[i].onmousemove = function () { this.style.backgroundColor
= "#FF2080";
this.style.color =
"#FFFFFF";
};
tbl.rows[i].onmouseout = function () { this.style.backgroundColor
= "";
this.style.color =
""; };
}
}
</script>
</body>
</html>
|