<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>text-align: 中央; <BR>} <BR>.datagrid tr { <BR>} <BR>.datagrid td { <BR>パディング: 5px; <BR>背景色: #ffffff; <BR>} <BR>/* OEC フォーム ページの CSS*/ <BR>.row_focus { <BR>background: #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></label> <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> </td> <br></tr> <br> </td> </tr> <tr> <br><td>2</td> <br><td>李四</td> <br><td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>3</td> <br><td>王五</td> <br><td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>4</td> <br><td>马六</td> <br><td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>5</td> <br><td> </td> <br> </td> <td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>6</td> <br><td> </td> <br> </td> <td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>7</td> <br><td> </td> <br> </td> <td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>8</td> <br><td> </td> <br> </td> <td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>9</td> <br><td> </td> <br> </td> <td> </td> <br></tr> <br> </td> </tr> <tr> <br><td>10</td> <br><td> </td> <br> </td> <td> </td> <br></tr> <br></table> <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 と インデックス プロパティ <br>$(this).attr("id", "tr_" i).attr("index", <br>}).click(function( ){ //ネズミ标双击 <br>clickTr($(this).attr("index")) <br>}).dblclick(function(){ //ネズミ标双击 <br>$("#txt_no" ).val(($(this).find("td")[0]).innerHTML);); <br><br>$(".datagrid tr:even").addClass("alt"); //偶行变色 <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; 'keydown', function(evt){ //↓ <br>var prevTrIndex = parseInt( "#prevTrIndex").val()); <br>if (prevTrIndex == -1 || prevTrIndex == (trSize - 1)){ <br>clickTr(0)>} else if (prevTrIndex < ; (trSize - 1)) { <br>clickTr(prevTrIndex 1) <br>} <br>return false; '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><br> </td> </tr> </div>