javascript 对表格的行和列都能加亮显示_javascript技巧

1,交叉加亮
2,点击左上角的 "1;1","2;2"观察所有单元值的变化
3,点击左上角的 "3,3","4,4"观察所有单元字体的变化
4,点击单元后，该单元颜色发生变化，并直至点击下一单元
5,将th与td分开;
Gu Laicheng, 2008.12.25

<script> <BR>var Nrow = 15,Ncol = 12; <BR>document.writeln("<tr class='titl'>"); <BR>for (var c=0;c<Ncol;c++ ) <BR>{ <BR>document.writeln("<th>F"+(c+1)+""); <BR>} <BR>document.writeln(""); <BR>for (var r=0;r<Nrow;r++ ) <BR>{ <BR>document.writeln("<tr>"); <BR>for (var c=0;c<Ncol;c++ ) <BR>{ <BR>document.writeln("<td class='outit'>"+(r+1)+";"+(c+1)+""); <BR>} <BR>document.writeln(""); <BR>} <BR></script>


<script> <BR>var currentRow,currentCol; <BR>table3.rows[1].cells[0].onclick = function(){init(0);} <BR>table3.rows[2].cells[1].onclick = function(){init(1);} <BR>table3.rows[3].cells[2].onclick = function(){ccssty(0);} <BR>table3.rows[4].cells[3].onclick = function(){ccssty(1);} <BR>table3.rows[1].cells[0].style.cursor = "hand" <BR>table3.rows[2].cells[1].style.cursor = "hand" <BR>table3.rows[3].cells[2].style.cursor = "hand" <BR>table3.rows[4].cells[3].style.cursor = "hand" <BR>table3.onmouseover = new Function("var d='over'; moveit(d);"); <BR>table3.onmouseout = new Function("var d='out'; moveit(d);"); <BR>table3.onclick = clickit; <BR>init(0); <BR>function get_Element(the_ele,the_tag){ <BR>the_tag = the_tag.toLowerCase(); <BR>if(the_ele.tagName.toLowerCase()==the_tag)return the_ele; <BR>while(the_ele=the_ele.offsetParent){ <BR>if(the_ele.tagName.toLowerCase()==the_tag)return the_ele; <BR>} <BR>return(null); <BR>} <BR>function setHorizontal(r,c,cn) <BR>{ <BR>for (var i=0;i<table3.rows[r].cells.length ;i++) <BR>{ <BR>table3.rows[r].cells[i].className = cn; <BR>} <BR>} <BR>function setVertical(r,c,cn) <BR>{ <BR>for (var i=1;i<table3.rows.length ;i++) // i starts from 0 because of TH <BR>{ <BR>table3.rows[i].cells[c].className = cn; <BR>} <BR>} <BR>function clickit(){ <BR>if (currentRow == 0) <BR>{ <BR>return; <BR>} <BR>var cl = parseInt(clickl.innerText), <BR>cc = parseInt(clickc.innerText); <BR>if (cl+"" != "NaN" && cc+"" != "NaN") { <BR>setVertical(currentRow,cc-1,"outit"); <BR>setHorizontal(cl,currentCol,"outit"); <BR>} <BR>//Vertical Cells <BR>setVertical(currentRow,currentCol-1,"clkit"); <BR>//Horizontal Cells <BR>setHorizontal(currentRow,currentCol-1,"clkit"); <BR>//The color at the cross point <BR>table3.rows[currentRow].cells[currentCol-1].className = "clkcr"; <BR>clickl.innerText = currentRow + "/"+Nrow <BR>clickc.innerText = currentCol + "/"+Ncol <BR>window.status = "Click on "+currentRow+","+currentCol; <BR>} <BR>function moveit(dir){ <BR>var the_obj = event.srcElement; <BR>if(the_obj.tagName.toLowerCase() == "table") return; <BR>if(the_obj.tagName.toLowerCase() == "th") <BR>{ <BR>var the_td = get_Element(the_obj,"th"); <BR>} else <BR>{ <BR>var the_td = get_Element(the_obj,"td"); <BR>} <BR>var the_tr = the_td.parentElement; <BR>currentRow = the_tr.rowIndex ; <BR>currentCol = the_td.cellIndex+1 ; <BR>//Vertical Cells <BR>setVertical(currentRow,currentCol-1,(dir=="over")?"ovrit":"outit"); <BR>//Do not set horizontal cells when the cursor is on TH <BR>if (currentRow>0) <BR>{ <BR>//Horizontal Cells <BR>setHorizontal(currentRow,currentCol-1,(dir=="over")?"ovrit":"outit"); <BR>//The color at the cross point <BR>the_tr.cells[currentCol-1].className = (dir=="over")?"cross":"outit"; <BR>var cl = parseInt(clickl.innerText), <BR>cc = parseInt(clickc.innerText); <BR>if (cl+"" != "NaN" && cc+"" != "NaN") { <BR>table3.rows[cl].cells[cc-1].className = "clkcr"; <BR>} <BR>} <BR>cline.innerText = currentRow + "/"+Nrow <BR>ccell.innerText = currentCol + "/"+Ncol <BR>} <BR>function init(f){ <BR>var val = new Array(); <BR>var the_obj = event.srcElement; <BR>var ii = jj = 0; <BR>var the_table = get_Element(the_obj,"table"); <BR>ii = the_table.rows.length; <BR>jj = the_table.rows[0].cells.length <BR>for(i=1;i<ii;i++){ <BR>for(j=0;j<jj;j++){ <BR>the_table.rows[i].cells[j].innerText= (f==0)?(""+((i-1)*jj+j+1)):(""+i+";"+(j+1)) ; <BR>} <BR>} <BR>} <BR>function ccssty(flag){ <BR>var the_obj = event.srcElement; <BR>var the_table = get_Element(the_obj,"table"); <BR>if(flag==0) <BR>the_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 14px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 11px"; <BR>if(flag==1) <BR>the_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 14px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: #AAAA00; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 11px"; <BR>} <BR></script>
当前行:

当前列:

点击行:

点击列: