码迷,mamicode.com
首页 > 其他好文 > 详细

支持键盘上下键的隔行变色代码

时间:2015-12-19 12:31:37      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!