jQuery 隔行换色支持键盘上下键，按Enter选定值

复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style>  </style> <title>无标题文档</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="txt_no" id="txt_no" /> </label> <br /> <table width="600" border="0" cellpadding="3" cellspacing="1" class="datagrid"> <tr> <td>1</td> <td> 张三</td> <td> </td> </tr> <tr> <td>2</td> <td>李四</td> <td> </td> </tr> <tr> <td>3</td> <td>王五</td> <td> </td> </tr> <tr> <td>4</td> <td>马六</td> <td> </td> </tr> <tr> <td>5</td> <td> </td> <td> </td> </tr> <tr> <td>6</td> <td> </td> <td> </td> </tr> <tr> <td>7</td> <td> </td> <td> </td> </tr> <tr> <td>8</td> <td> </td> <td> </td> </tr> <tr> <td>9</td> <td> </td> <td> </td> </tr> <tr> <td>10</td> <td> </td> <td> </td> </tr> </table> <input type="hidden" name="prevTrIndex" id="prevTrIndex" value="-1" /> </form> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#prevTrIndex").val("-1");//默认-1 var trSize = $(".datagrid tr").size();//datagrid中tr的数量 function clickTr(currTrIndex){ var prevTrIndex = $("#prevTrIndex").val(); if (currTrIndex > -1){ $("#tr_" + currTrIndex).addClass("over"); } $("#tr_" + prevTrIndex).removeClass("over"); $("#prevTrIndex").val(currTrIndex); } $(".datagrid tr").mouseover(function(){//鼠标滑过 $(this).addClass("over"); }).mouseout(function(){ //鼠标滑出 $(this).removeClass("over"); }).each(function(i){ //初始化 id 和 index 属性 $(this).attr("id", "tr_" + i).attr("index", i); }).click(function(){ //鼠标单击 clickTr($(this).attr("index")); }).dblclick(function(){ //鼠标双击 $("#txt_no").val(($(this).find("td")[0]).innerHTML); }); $(".datagrid tr:even").addClass("alt"); //偶行变色 $(document).bind('keydown', 'up', function(evt){ //↑ var prevTrIndex = parseInt($("#prevTrIndex").val()); if (prevTrIndex == -1 || prevTrIndex == 0){ clickTr(trSize - 1); } else if(prevTrIndex > 0){ clickTr(prevTrIndex - 1); } return false; }).bind('keydown', 'down', function(evt){ //↓ var prevTrIndex = parseInt($("#prevTrIndex").val()); if (prevTrIndex == -1 || prevTrIndex == (trSize - 1)){ clickTr(0); } else if (prevTrIndex < (trSize - 1)) { clickTr(prevTrIndex + 1); } return false; }).bind('keydown', 'return', function(evt){ //↙ var prevTrIndex = parseInt($("#prevTrIndex").val()); $("#txt_no").val(($("#tr_" + prevTrIndex).find("td")[0]).innerHTML); return false; }); clickTr(0); }) </script> </body> </html>

复制代码代码如下: Async = {}; Async.Operation = function(options) { options = options || {}; var callbackQueue = []; var chain = (options.chain && options.chain === true) ? true : false; var starte>>>详细阅读

本文标题：jQuery 隔行换色支持键盘上下键，按Enter选定值

地址：http://www.17bianji.com/kaifa2/JS/28326.html

1/2 1

jQuery 隔行换色 支持键盘上下键，按Enter选定值

jQuery 隔行换色支持键盘上下键，按Enter选定值