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 MD5加密实现代码
Mar 15 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
利用JS实现数字增长
Jul 28 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
学习vue.js计算属性
Dec 03 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
js实现验证码功能
Jul 24 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
学习php中的正则表达式
2014/08/17 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
python主线程捕获子线程的方法
2018/06/17 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
英语系毕业生自荐信
2013/10/31 职场文书
学生出入校管理制度
2014/01/16 职场文书
教师个人鉴定材料
2014/02/08 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
试用期辞职信范文
2015/03/02 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
婚育证明样本
2015/06/16 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
python实现自定义日志的具体方法
2021/05/28 Python
详解Python为什么不用设计模式
2021/06/24 Python