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

 这篇文章主要介绍了javascript上下方向键控制表格行选中并高亮显示的方法,涉及javascript针对键盘按键操作相应的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

 
 

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

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<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程序设计有所帮助。

时间: 2024-10-06 08:54:10

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

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

本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法.分享给大家供大家参考.具体实现方法如下: <style> tr.highlight { background:#08246B; color:white; } </style> <table border="1" width="70%" id="ice"> <tr onClick="selectTR();return fa

jquery实现带单选按钮的表格行选中时高亮显示

如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的,于是本文下了个示例,有需要的朋友可以参考下   上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的.如今的时代,就是用户体验的时代. 效果如下: CSS文件如下如下所示: 复制代码 代码如下: .selected{ background:#FF6500; color:#fff; }: 这次的js文

jquery实现带单选按钮的表格行选中时高亮显示_jquery

上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的.如今的时代,就是用户体验的时代. 效果如下: CSS文件如下如下所示: 复制代码 代码如下: .selected{ background:#FF6500; color:#fff; }: 这次的js文件的代码就变得更简单了,如下所示: 复制代码 代码如下: /** * 设置含有单选按钮的表格的背景颜色 */ $(document).r

定位 光标-如何使用javascript使用方向键控制光标在table单元格的文本框(是TextBox控件)中跳动

问题描述 如何使用javascript使用方向键控制光标在table单元格的文本框(是TextBox控件)中跳动 最近在做一个仓库管理系统,客户说最好能用方向键来定位光标,不需要用鼠标点击,这样必须麻烦,我在table单元格中放了文本框(TextBox控件),如何用方向键来定位,谢谢大家啦...

JS实现控制表格单元格垂直对齐的方法

 这篇文章主要介绍了JS实现控制表格单元格垂直对齐的方法,涉及javascript操作表单元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html>

JS实现控制表格行内容垂直对齐的方法

 这篇文章主要介绍了JS实现控制表格行内容垂直对齐的方法,通过javascript的getElementById获取元素并设置其相应样式来实现这一功能,需要的朋友可以参考下     本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2

JS实现控制表格行内容垂直对齐的方法_javascript技巧

本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <

javascript 使用DOM控制表格及表单实例教程

使用DOM控制表格 表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: var oTr = document.getElementById("member").insertRow(2) 是指将新行添加到第二行. var aText = new Array();    aText[0] = document.createTextNode("fresheggs");    aText[1]

jquery实现带复选框的表格行选中删除时高亮显示

在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除.在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示   通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复 选框的,删除时,将复选框所在的行的记录删除.在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示.这样给人的感觉非 常好. 效果如下:   我做的这里有两个功