JavaScript can highlight rows and columns of tables_javascript skills

1. Cross-highlight
2. Click "1;1", "2;2" in the upper left corner to observe the changes in all unit values ​​
3. Click "3,3", "4,4" in the upper left corner "Observe the changes in the font of all units
4. After clicking on the unit, the color of the unit changes until the next unit is clicked
5. Separate th from td;
Gu Laicheng, 2008.12.25

body,th,td
{ font-size: 10pt;
} .Tlist1
{


border-collapse:collapse;table-layout:fixed;width:710px; }
.outit
{ background: #EEDDFF; }
.ovrit
{ background: #AADDFF; }
.cross
{ background: #33DDFF; }
.clkit
{ background: #DDAAAA; }
.clkcr
{ background: #AA7777;
} <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>.titl <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>{ background: #77AAFF; } Current row: Current column: Clicked row: Clicked column: