支援鍵盤上下鍵的隔行變色程式碼

admin發表於2017-02-13
隔行變色程式碼非常的常用，尤其是在新聞列表形式的場景，不過大多數都只是支援滑鼠效果，而對鍵盤的上下鍵並不支援。

下面就提供一段支援上下鍵的隔行變色效果程式碼。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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>

相關文章