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


Posted in Javascript onAugust 02, 2009
<!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>
Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
一句话JavaScript表单验证代码
Aug 02 #Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 #Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 #Javascript
Javascript 汉字字节判断
Aug 01 #Javascript
JS 面向对象的5钟写法
Jul 31 #Javascript
Document 对象的常用方法
Jul 31 #Javascript
javascript getElementsByName()的用法说明
Jul 31 #Javascript
You might like
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
平面设计的岗位职责
2013/11/08 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
高一自我鉴定
2013/12/17 职场文书
邮政员工辞职信
2014/01/16 职场文书
寄语学生的话
2014/04/10 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
python实现简单倒计时功能
2021/04/21 Python