JavaScript でテーブルの行と列を強調表示できる_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
{
背景: } .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> 現在の行: 現在の列: クリックされた行: クリックされた列: