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

代码如下:

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

赞 (0)

相关推荐

  • jQuery方法简洁实现隔行换色及toggleClass的使用

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&quo

  • 使用jquery hover事件实现表格的隔行换色功能示例

    jQuery hover事件 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常

  • jquery隔行换色效果实现方法

    本文实例讲述了jquery隔行换色效果实现方法.分享给大家供大家参考.具体分析如下: 使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样.来吧,看看代码到底有多么的简单 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javasc

  • 基于Jquery的表格隔行换色，移动换色，点击换色插件

    基于Jquery的表格隔行换色，移动换色，点击换色插件

    效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt

  • jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    js代码:  css代码: 复制代码 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }

  • Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例

    [javascript] 复制代码 代码如下: $(function () {     gridview("GridView1"); }); //gridview function gridview(objgridview) {     //get obj id     var gridviewId = "#" + objgridview;     //even     $(gridviewId + ">tbody tr:even").ad

  • jQuery实现table隔行换色和鼠标经过变色的两种方法

    一.隔行换色 复制代码 代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码 代码如下: $("table tr:nth-child(odd)").css("background-col

  • 使用简洁的jQuery方法实现隔行换色功能

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>隔行换色</title>    <script src="js/jquery-1.4.2.min.js"></script>    <style type=&

  • 用简洁的jQuery方法toggleClass实现隔行换色

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type="text/css&

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

    复制代码 代码如下: <!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=&qu

  • jQuery实现表格隔行换色

    本文实例为大家分享了jQuery实现表格隔行换色的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用JQ完成表格隔行换色</title> <script src="js/jquery.min.js"></script> <script> $(funct

  • jquery实现表格隔行换色效果

    jquery实现表格隔行换色效果

    本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html: TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

随机推荐