标签：
支持键盘上下键的隔行变色代码:
隔行变色代码非常的常用，尤其是在新闻列表形式的场景，不过大多数都只是支持鼠标效果，而对键盘的上下键并不支持。
下面就提供一段支持上下键的隔行变色效果代码。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <meta name="keywords" content="支持键盘上下键的隔行变色代码、JS特效、Jquery特效" /> <meta name="description" content="支持键盘上下键的隔行变色代码、JS特效、Jquery特效" /> <title>支持键盘上下键的隔行变色代码-蚂蚁部落</title> <style type="text/css"> .datagrid{ width:100%; background-color:#6595d6; } .datagrid th{ background-color:#6595d6; color:#ffffff; font-size:12px; font-weight: old; height:25px; line-height:25px; text-align:center; } .datagrid td{ adding:5px; background-color:#ffffff; } .row_focus{ background:#B0FFB0; border:1px solid #00cc33; } tr.alt td{ background:#ecf6fc; } tr.over td{ background:#bcd4ec; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="txt_no" id="txt_no" /> </label> <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> </body> </html>
上面代码实现了我们的需求，当点击上下键盘按钮的时候，可以实现隔行变色效果，并且当鼠标放在某一行上，点回车键，能够将行数填写在顶部文本框中。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=7885
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/come-on/p/5058869.html
