表格显示时横向和纵向交叉加亮[分享]

1,交叉加亮<br>
2,点击左上角的 "1;1","2;2"观察所有单元值的变化<br>
3,点击左上角的 "3,3","4,4"观察所有单元字体的变化<br>
4,将th与td分开; 
Gu Laicheng, 2008.12.25<HTML>
<HEAD>
<TITLE>交叉加亮</TITLE><style>.Tlist1
 {
border-collapse:collapse;table-layout:fixed;width:710px;
 }.outit
 {
background: #EEDDFF;
 }
.ovrit
 {
background: #AADDFF;
 }
.cross
 {
background: #33DDFF;
 }.titl
 {
background: #77AAFF;
 }
</style></HEAD>
<BODY><table id="table3" border="1" cellpadding=4 cellspacing=0 bordercolor='#3377FF' align=center class=Tlist1 id=Tlist1>
<script>
var Nrow = 15,Ncol = 12;
document.writeln("<tr class='titl'>");
for (var c=0;c<Ncol;c++ )
{
document.writeln("<th>F"+(c+1)+"</th>");
}
document.writeln("</tr>"); for (var r=0;r<Nrow;r++ )
{
document.writeln("<tr class='outit'>");
for (var c=0;c<Ncol;c++ )
{
document.writeln("<td>"+(r+1)+";"+(c+1)+"</td>");
}
document.writeln("</tr>");
}
</script></table>
</BODY><script>table3.rows[1].cells[0].onclick = function(){init(0);}
table3.rows[2].cells[1].onclick = function(){init(1);}
table3.rows[3].cells[2].onclick = function(){ccssty(0);}
table3.rows[4].cells[3].onclick = function(){ccssty(1);}table3.rows[1].cells[0].style.cursor = "hand"
table3.rows[2].cells[1].style.cursor = "hand"
table3.rows[3].cells[2].style.cursor = "hand"
table3.rows[4].cells[3].style.cursor = "hand"table3.onmouseover = new Function("var d='over'; moveit(d);");
table3.onmouseout = new Function("var d='out'; moveit(d);");init(0);function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
}
return(null);
}function moveit(dir){ var the_obj = event.srcElement;
if(the_obj.tagName.toLowerCase() == "table") return;
if(the_obj.tagName.toLowerCase() == "th") 
{
var the_td = get_Element(the_obj,"th");
} else
{
var the_td = get_Element(the_obj,"td");
} var the_tr = the_td.parentElement; //Vertical Cells
for (var i=1;i<the_tr.parentElement.rows.length ;i++) // i starts from 0 because of TH
{
the_tr.parentElement.rows[i].cells[the_td.cellIndex].className = (dir=="over")?"ovrit":"outit";
} //Do not set horizontal cells when the cursor is on TH
if (the_tr.rowIndex>0)
{
//Horizontal Cells
for (var i=0;i<the_tr.cells.length ;i++) //i=0 -> 
{
the_tr.cells[i].className = (dir=="over")?"ovrit":"outit";
} //The color at the cross point
the_tr.cells[the_td.cellIndex].className = (dir=="over")?"cross":"outit";
} cline.innerText = the_tr.rowIndex    +"/"+Nrow
ccell.innerText = the_td.cellIndex+1 +"/"+Ncol
}function init(f){
var val = new Array(); var the_obj = event.srcElement;
var ii = jj = 0;
var the_table = get_Element(the_obj,"table"); ii = the_table.rows.length;
jj = the_table.rows[0].cells.length
for(i=1;i<ii;i++){
for(j=0;j<jj;j++){
the_table.rows[i].cells[j].innerText= (f==0)?(""+((i-1)*jj+j+1)):(""+i+";"+(j+1)) ;
}
}
}function ccssty(flag){
var the_obj = event.srcElement;
var the_table = get_Element(the_obj,"table");
if(flag==0)
the_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 11px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 11px";
if(flag==1)
the_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 11px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: red; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 11px";
}
</script>当前行:<span id=cline></span><br/>
当前列:<span id=ccell></span><br/>
</HTML>