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 相关文章推荐
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
js继承实现方法详解
Dec 16 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
JavaScript的function函数详细介绍
Nov 20 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
js性能优化技巧
2015/11/29 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
django 简单实现登录验证给你
2019/11/06 Python
学习Python爬虫的几点建议
2020/08/05 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
党员岗位承诺书
2014/03/25 职场文书
团日活动总结
2014/04/28 职场文书
高中同学会致辞
2015/08/01 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL