javascript上下方向键控制表格行选中并高亮显示的方法
作者:bea
本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法。分享给大家供大家参考。具体实现方法如下: <style>tr.highlight { background:#08246B; color:white;}</style><table border="1" width="70%" id="ice"> <tr onClick="selectTR();return false;"> <td>1
本文实例讲述了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程序设计有所帮助。
猜你喜欢
您可能感兴趣的文章:
- jQuery实现点击图片翻页展示效果的方法
- JS+CSS实现可拖动的弹出提示框
- js实现下拉框选择要显示图片的方法
- js实现点击图片将图片地址复制到粘贴板的方法
- js实现鼠标经过时图片滚动停止的方法
- js鼠标点击图片实现随机变换图片的方法
- JavaScript简介
- JavaScript的原型继承详解
- javascript 闭包详解
- PhotoShop给图片自动添加边框及EXIF信息的JS脚本
- 浅析javascript中函数声明和函数表达式的区别
- 不同编码的页面表单数据乱码问题解决方法
- 浅谈javascript中this在事件中的应用
- javascript使用正则表达式实现去掉空格之后的字符
- 分享一个自己写的简单的javascript分页组件
- Linux下编译安装php libevent扩展实例
- jQuery中extend函数详解
- NodeJS使用jQuery选择器操作DOM
- JavaScript将Web页面内容导出到Word及Excel的方法