JavaScript는 tables_javascript 기술의 행과 열을 강조 표시할 수 있습니다.

1. 교차 강조 표시
2. 왼쪽 상단의 "1;1", "2;2"를 클릭하여 모든 단위 값의 변화를 관찰합니다.
3. "3,3", "을 클릭합니다. 왼쪽 상단의 4,4" "모든 단위의 글꼴 변화 관찰
4. 단위를 클릭한 후 다음 단위를 클릭할 때까지 단위의 색상이 변경됩니다
5. td;
구라이청, 2008.12.25

body,th,td
{ 글꼴 크기: 10pt;
} .Tlist1
{


border-collapse:collapse;table-layout:fixed;width:710px; .outit {
배경: #EEDDFF
} .ovrit {
배경: #AADDFF
} .cross {
배경: #33DDFF;
} .clkit {
배경: #DDAAAA
} .clkcr {
배경: #AA7777; >}
.titl {
배경: #77AAFF <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> 현재 행: 현재 열: 클릭한 행: 클릭한 열: