highlight row and col of table [Archive]

rukawa1184

11-11-2010, 10:17 AM

I can highlight row but can't row and col because I can get number of col when mouse over, plz help me. This is my table.

<table border="5" cellpadding="4" cellspacing="2">
<col id="c1" /><col id="c2" /><col id="c3" /><col id="c4" /><col id="c5" /><col id="c6" /><col id="c7" /><col id="c8" />
<thead>
<tr>
<td width="65" bgcolor="#000099">Buổi</td>
<td width="80" bgcolor="#000099">Thời gian</td>
<td width="92" bgcolor="#000099">Thứ 2</td>
<td width="102" bgcolor="#000099">Thứ 3</td>
<td width="97" bgcolor="#000099">Thứ 4</td>
<td width="77" bgcolor="#000099">Thứ 5</td>
<td width="80" bgcolor="#000099">Thứ 6</td>
<td width="84" bgcolor="#000099">Thứ 7</td>
</tr>
</thead>
<tbody id="binding">
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td rowspan="8" bgcolor="#000099">Sáng</td>
<td rowspan="4" bgcolor="#000099">7g-9g15</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td rowspan="4" bgcolor="#000099">9g15-11g30</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td rowspan="8" bgcolor="#000099">Chiều</td>
<td rowspan="4" bgcolor="#000099">13g-15g15</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'")>
<td rowspan="4" bgcolor="#000099">15g15-17g30</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td rowspan="4" bgcolor="#000099">Tối</td>
<td rowspan="4" bgcolor="#000099">17g30-20g30</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmousemove="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='black'">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Sciliano

11-11-2010, 11:41 AM

Highlight row and column header cell:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function init(){

var nTable = document.getElementsByTagName('table')[0];
var nHeader = nTable.getElementsByTagName('th');
var nCell = nTable.getElementsByTagName('td');
var nRowCell = "";
for (i=0; i<nCell.length; i++)
{
nCell[i].onmouseover = function()
{
nRowCell = this.parentNode.getElementsByTagName('td');
for (n=0; n<nRowCell.length; n++)
{
nRowCell[n].style.backgroundColor = "#87ceeb";
if (nRowCell[n] == this)
{
nHeader[n].style.backgroundColor = "#ff8c00";
}
}
this.onmouseout = function()
{
for (n=0; n<nRowCell.length; n++)
{
nRowCell[n].style.backgroundColor = "#ffffe0";
if (nRowCell[n] == this)
{
nHeader[n].style.backgroundColor = "#7fffd4";
}
}
}
}
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}

table {width: 400px; margin-left: auto; margin-right: auto; border-collapse: collapse;
border-bottom: 1px solid black; border-right: 1px solid black; font-family: arial; font-size: 12pt;
cursor: default;}
table th {background-color: #7fffd4; border-left: 1px solid black; border-top: 1px solid black; padding: 5px;}
table tr td {background-color: #ffffe0; border-top: 1px solid black; border-left: 1px solid black;
text-align: center; padding: 5px;}

</style>
</head>
<body>
<table>
<thead>
<tr>
<th width="33%">Column 1</th>
<th width="33%">Column 2</th>
<th width="33%">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>One</td>
<td>One</td>
</tr>
<tr>
<td>Two</td>
<td>Two</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Three</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Four</td>
<td>Four</td>
</tr>
</tbody>
</table>
</body>
</html>