<div class="codetitle"> <span><a style="CURSOR: pointer" data="1940" class="copybut" id="copybut1940" onclick="doCopy('code1940')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code1940"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><스타일> <br><!-- <BR>/* 데이터 그리드용 CSS*/ <BR>.datagrid { <BR>width: 100%; <BR>배경색: #6595d6; <BR>} <BR>.datagrid caption { <BR>} <BR>.datagrid th { <BR>/*Background-image: url("images/div.th.Background-image.gif" );*/ <BR>배경색: #6595d6; <BR>색상: #ffffff; <BR>글꼴 크기: 12px; <BR>글꼴 두께: 굵게; <BR>높이: 25px; <BR>줄 높이: 25px; <BR>텍스트 정렬: 가운데; <BR>} <BR>.datagrid tr { <BR>} <BR>.datagrid td { <BR>padding: 5px; <BR>배경색: #ffffff; <BR>} <BR>/* OEC 양식 페이지용 CSS*/ <BR>.row_focus { <BR>배경: #B0FFB0; <BR>테두리: 1px 단색 #00cc33; <BR>} <BR>/* CSS 또는 테이블 행 효과 */ <BR>tr.alt td { <BR> background: #ecf6fc; <BR>} <BR>tr.over td { <BR>배경: #bcd4ec; <BR>} <BR>--> <br></style> <br><title>无标题文档</title> <br></head> <br><본문> <br><form id="form1" name="form1" method="post" action=""> <br><라벨> <br><input type="text" name="txt_no" id="txt_no" /> <br></라벨> <br><br /> <br><table width="600" border="0" cellpadding="3" cellpacing="1" class="datagrid"> <br><tr> <br><td>1</td> <br><td> 张삼</td> <br><td> </td> <br></tr> <br><tr> <br><td>2</td> <br><td>이사</td> <br><td> </td> <br></tr> <br><tr> <br><td>3</td> <br><td>王五</td> <br><td> </td> <br></tr> <br><tr> <br><td>4</td> <br><td>马六</td> <br><td> </td> <br></tr> <br><tr> <br><td>5</td> <br><td> </td> <br><td> </td> <br></tr> <br><tr> <br><td>6</td> <br><td> </td> <br><td> </td> <br></tr> <br><tr> <br><td>7</td> <br><td> </td> <br><td> </td> <br></tr> <br><tr> <br><td>8</td> <br><td> </td> <br><td> </td> <br></tr> <br><tr> <br><td>9</td> <br><td> </td> <br><td> </td> <br></tr> <br><tr> <br><td>10</td> <br><td> </td> <br><td> </td> <br></tr> <br></테이블> <br><input type="hidden" name="prevTrIndex" id="prevTrIndex" value="-1" /> <br></form> <br><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <br><script type="text/javascript" src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.js"></script> <br><script type="text/javascript"> <br>$(document).ready(function(){ <br>$("#prevTrIndex").val("-1");//默认-1 <br>var trSize = $(".datagrid tr ").size();//datagrid中tr량 <br><br>function clickTr(currTrIndex){ <br>var prevTrIndex = $("#prevTrIndex").val(); <br>if (currTrIndex > -1){ <br>$("#tr_" currTrIndex).addClass("over") <br>$("#tr_" prevTrIndex).removeClass("over"); >$("#prevTrIndex").val(currTrIndex) <br>} <br><br>$(".datagrid tr").mouseover(function(){//鼠标滑过 <br>$(this ).addClass("over"); <br>}).mouseout(function(){ //鼠标滑출 <br>$(this).removeClass("over"); <br>}).each(function (i){ //初始化 id 와 index 属性 <br>$(this).attr("id", "tr_" i).attr("index", i) <br>}).click(function( ){ //鼠标单击 <br>clickTr($(this).attr("index")) <br>}).dblclick(function(){ //鼠标双击 <br>$("#txt_no" ).val(($(this).find("td")[0]).innerHTML) <br>}); <br><br>$(".datagrid tr:even").addClass("alt"); //偶行变color <br><br>$(document).bind('keydown', 'up', function(evt){ //↑ <br>var prevTrIndex =parseInt($("#prevTrIndex"). val()); <br>if (prevTrIndex == -1 || prevTrIndex == 0){ <br>clickTr(trSize - 1) <br>} else if(prevTrIndex > 0){ <br>clickTr (prevTrIndex - 1); <br>} <br>return false; <br>}).bind('keydown', 'down', function(evt){ //↓ <br>var prevTrIndex =parseInt($( "#prevTrIndex").val()); <br>if (prevTrIndex == -1 || prevTrIndex == (trSize - 1)){ <br>clickTr(0) <br>} else if (prevTrIndex < ; (trSize - 1)) { <br>clickTr(prevTrIndex 1); <br>} <br>return false <br>}).bind('keydown', 'return', function(evt){ // ↙ <br>var prevTrIndex =parseInt($("#prevTrIndex").val()) <br>$("#txt_no").val(($("#tr_" prevTrIndex).find("td" )[0]).innerHTML); <br>거짓을 반환합니다 <br>}); <br>clickTr(0); <br>}) <br></script> <br></body> <br></html><br> </div>
