1.교차 하 이 라이트 2,왼쪽 상단 의"1"을 클릭 합 니 다.1","2;2"모든 단원 값 의 변 화 를 관찰 3.왼쪽 상단 의"3,3","4,4"를 클릭 하여 모든 단원 글꼴 의 변 화 를 관찰 4.단원 을 클릭 하면 이 단원 의 색상 이 변화 하고 다음 단원 5 를 클릭 할 때 까지 th 와 td 를 분리 합 니 다.Gu Laicheng,2008.12.25
교차 하 이 라이트 디 스 플레이</ITLE><style>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; } .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>"); for (var c=0;c<Ncol;c++ ) { document.writeln("<td class='outit'>"+(r+1)+";"+(c+1)+"</td>"); } document.writeln("</tr>"); } </script> </table> </BODY> <script> var currentRow,currentCol; 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);"); table3.onclick = clickit; 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 setHorizontal(r,c,cn) { for (var i=0;i<table3.rows[r].cells.length ;i++) { table3.rows[r].cells[i].className = cn; } } function setVertical(r,c,cn) { for (var i=1;i<table3.rows.length ;i++) // i starts from 0 because of TH { table3.rows[i].cells[c].className = cn; } } function clickit(){ if (currentRow == 0) { return; } var cl = parseInt(clickl.innerText), cc = parseInt(clickc.innerText); if (cl+"" != "NaN" && cc+"" != "NaN") { setVertical(currentRow,cc-1,"outit"); setHorizontal(cl,currentCol,"outit"); } //Vertical Cells setVertical(currentRow,currentCol-1,"clkit"); //Horizontal Cells setHorizontal(currentRow,currentCol-1,"clkit"); //The color at the cross point table3.rows[currentRow].cells[currentCol-1].className = "clkcr"; clickl.innerText = currentRow + "/"+Nrow clickc.innerText = currentCol + "/"+Ncol window.status = "Click on "+currentRow+","+currentCol; } 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; currentRow = the_tr.rowIndex ; currentCol = the_td.cellIndex+1 ; //Vertical Cells setVertical(currentRow,currentCol-1,(dir=="over")?"ovrit":"outit"); //Do not set horizontal cells when the cursor is on TH if (currentRow>0) { //Horizontal Cells setHorizontal(currentRow,currentCol-1,(dir=="over")?"ovrit":"outit"); //The color at the cross point the_tr.cells[currentCol-1].className = (dir=="over")?"cross":"outit"; var cl = parseInt(clickl.innerText), cc = parseInt(clickc.innerText); if (cl+"" != "NaN" && cc+"" != "NaN") { table3.rows[cl].cells[cc-1].className = "clkcr"; } } cline.innerText = currentRow + "/"+Nrow ccell.innerText = currentCol + "/"+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: 14px; 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: 14px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: #AAAA00; PADDING-TOP: 0px; FONT-FAMILY:송 체;HEIGHT: 11px"; } </script>현재 줄:<span id=cline></span><br/>현재 열:<span id=ccell></span><br/>클릭 줄:<span id=clickl></span><br/>클릭 열:<span id=clickc></span><br/></HTML>
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
