你的位置:首页 > Java教程

[Java教程]支持键盘上下键的隔行变色代码


支持键盘上下键的隔行变色代码:
隔行变色代码非常的常用,尤其是在新闻列表形式的场景,不过大多数都只是支持鼠标效果,而对键盘的上下键并不支持。
下面就提供一段支持上下键的隔行变色效果代码。
代码如下:

<!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/