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 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
React路由管理之React Router总结
May 10 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
深入密码加salt原理的分析
2013/06/06 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php绘制一个扇形的方法
2015/01/24 PHP
smarty中常用方法实例总结
2015/08/07 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python tcp传输代码实例解析
2020/03/18 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
python 实现简易的记事本
2020/11/30 Python
python 爬虫请求模块requests详解
2020/12/04 Python
英文求职信结束语大全
2013/10/26 职场文书
幼儿园新年寄语
2014/04/03 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL