javascript上下方向键控制表格行选中并高亮显示的方法


Posted in Javascript onFebruary 13, 2015

本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法。分享给大家供大家参考。具体实现方法如下:

<style>
tr.highlight {
 background:#08246B;
 color:white;
}
</style>
<table border="1" width="70%" id="ice">
 <tr onClick="selectTR();return false;">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
 <tr onClick="selectTR();">
  <td>123</td>
  <td>234</td>
  <td>abc</td>
  <td>def</td>
 </tr>
</table>
<script language="javascript"> 
<!-- 
var currentLine = -1; 
document.onkeydown = function(e)  
{ 
  e = window.event || e; 
  switch(e.keyCode)  
  { 
    case 38: 
      currentLine--; 
      changeItem(); 
      break; 
    case 40: 
      currentLine++; 
      changeItem(); 
      break; 
    default: 
      break; 
  } 
} 
function selectTR()
{
 currentLine=window.event.srcElement.parentElement.rowIndex;
 //alert(currentLine);
 changeItem();
}
//改变选择项目 
function changeItem() 
{ 
  if(document.all) 
    var it = document.getElementById("ice").children[0]; 
  else 
    var it = document.getElementById("ice");

  for(i=0;i<it.rows.length;i++)  
  { 
    it.rows[i].className = ""; 
  } 
  if(currentLine < 0) 
    currentLine = it.rows.length - 1; 
  if(currentLine == it.rows.length) 
    currentLine = 0; 
  it.rows[currentLine].className = "highlight"; 
} 
//--> 
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 #Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 #Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 #Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 #Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 #Javascript
AngularJS表单编辑提交功能实例
Feb 13 #Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php检测useragent版本示例
2014/03/24 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python yield关键词案例测试
2019/10/15 Python
python命令 -u参数用法解析
2019/10/24 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
解决python运行启动报错问题
2020/06/01 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
SQL Server笔试题
2012/01/10 面试题
商务英语专业毕业生求职信
2014/07/06 职场文书
社区志愿者活动方案
2014/08/18 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书