Lock header table and first column. Giúp với ae ơi, gấp .... [Archive]

cattuhan

14-03-2009, 10:02

Mình search được 1 file html nó dùng để khóa dòng đầu và cột đầu của 1 table khi ta cuộn 2 thanh cuộn. Nhưng nó chỉ chạy được trong IE còn trong Firefox thì không được như vậy nên mình post lên đây mong các cao thủ ở đây chỉ mình với.Mình up lên bị failed hoài nên mình paste ra đây luôn.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lock Columns, Column Locking, Freeze Columns in HTML Tables</title>
<script language="javascript" type="text/javascript" src="prototype-1.6.0.2.js"></script>
<style type="text/css">
div#tbl-container {
width: 400px;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}
#tbl-container table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}
#tbl-container thead th, #tbl-container thead th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
div#tbl-container table th {
width: 100px;
}
#tbl-container thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */
z-index: 20;
}
#tbl-container thead th.locked {z-index: 30;}
#tbl-container td.locked, #tbl-container th.locked {
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(parentNode.parentNode.parentNode.parent Node.scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}
</style>
<script type="text/javascript">
function lockCol(tblID)
{
var table = document.getElementById(tblID);
var button = document.getElementById('toggle');
var cTR = table.getElementsByTagName('TR'); //collection of rows
if (table.rows[0].cells[0].className == '')
{
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = 'locked'
}
button.innerText = "Unlock First Column";
}
else
{
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = ''
}
button.innerText = "Lock First Column";
}
}
</script>
</head>
<body>
<button onClick="lockCol('tbl')" id="toggle">Lock First Column</button>
<div id="tbl-container">
<table id="tbl">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>***</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>

<tbody>

<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>

</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>85</td>

</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>80</td>

</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
<td>85</td>
<td>68</td>
<td>90</td>
<td>90</td>

</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
<td>100</td>
<td>90</td>
<td>90</td>
<td>85</td>

</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
<td>80</td>
<td>50</td>
<td>65</td>
<td>75</td>

</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
<td>85</td>
<td>100</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
<td>86</td>
<td>85</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
<td>100</td>
<td>75</td>
<td>70</td>
<td>85</td>

</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>80</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
<td>50</td>
<td>45</td>
<td>55</td>
<td>90</td>

</tr>
<tr>
<td>Student15</td>
<td>Languages</td>
<td>male</td>
<td>95</td>
<td>35</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>50</td>
<td>30</td>
<td>70</td>

</tr>
<tr>
<td>Student17</td>
<td>Languages</td>
<td>female</td>
<td>80</td>
<td>100</td>
<td>55</td>
<td>65</td>

</tr>
<tr>
<td>Student18</td>
<td>Mathematics</td>
<td>male</td>
<td>30</td>
<td>49</td>
<td>55</td>
<td>75</td>

</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
<td>68</td>
<td>90</td>
<td>88</td>
<td>70</td>

</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
<td>40</td>
<td>45</td>
<td>40</td>
<td>80</td>

</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
<td>50</td>
<td>45</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student23</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>80</td>
<td>80</td>
<td>80</td>

</tr>
</tbody>
</table>
</div> 
<script language="javascript" type="text/javascript">
lockCol("tbl");
Event.observe('tbl-container', 'scroll', checkLeft);
function checkLeft()
{
var node = $('tbl-container').select('[class="locked"]');

for (var i = 0; i < node.length; i++)
{
node[i].style.left = parentNode.parentNode.parentNode.parentNode.scroll Left;
}
}
</script>
</body>
</html>

Giúp mình với nha, mình đang cần gấp. Thank mấy bác nhiều!!!