jQuery 隔行换色 支持键盘上下键按Enter选定值

【 tulaoshi.com - Web开发 】

代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style
!--
/* css for data grid*/
.datagrid {
width: 100%;
background-color: #6595d6;
}
.datagrid caption {
}
.datagrid th {
/*background-image: url("images/div.th.background-image.gif" );*/
background-color: #6595d6;
color: #ffffff;
font-size: 12px;
font-weight: bold;
height: 25px;
line-height: 25px;
text-align: center;
}
.datagrid tr {
}
.datagrid td {
padding: 5px;
background-color: #ffffff;
}
/* css for OEC form page*/
.row_focus {
background: #B0FFB0;
border: 1px solid #00cc33;
}
/* css or table row effect */
tr.alt td {
background: #ecf6fc;
}
tr.over td {
background: #bcd4ec;
}
--
/style
title无标题文档/title
/head
body
form id="form1" name="form1" method="post" action=""
label
input type="text" name="txt_no" id="txt_no" /
/label
br /
table width="600" border="0" cellpadding="3" cellspacing="1" class="datagrid"
tr
td1/td
td 张三/td
td /td
/tr
tr
td2/td
td李四/td
td /td
/tr
tr
td3/td
td王五/td
td /td
/tr
tr
td4/td
td马六/td
td /td
/tr
tr
td5/td
td /td
td /td
/tr
tr
td6/td
td /td
td /td
/tr
tr
td7/td
td /td
td /td
/tr
tr
td8/td
td /td
td /td
/tr
tr
td9/td
td /td
td /td
/tr
tr
td10/td
td /td
td /td
/tr
/table
input type="hidden" name="prevTrIndex" id="prevTrIndex" value="-1" /
/form
script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/script
script type="text/javascript" src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.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
/body
/html