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学习笔记 delete运算符
Sep 13 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
一句话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使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
pytest中文文档之编写断言
2019/09/12 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
校庆筹备方案
2014/03/30 职场文书
网络销售员岗位职责
2015/04/11 职场文书
光荣之路观后感
2015/06/12 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python