代码如下：

 
 
 
 
 
 
 
Jquery隔行换色-www.-脚本学堂 
 
 
 
 
 
 

 
 
 
1 
 张三 
  
 
 
2 
李四 
  
 
 
3 
王五 
  
 
 
4 
马六 
  
 
 
5 
  
  
 
 
6 
  
  
 
 
7 
  
  
 
 
8 
  
  
 
 
9 
  
  
 
 
10 
  
  
 
 
 
 
 
 
 
$(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); 
}) 
 
 

您可能感兴趣的文章: