点键盘“上下”按钮时得到行的焦点，同时改变颜色背景色
2006-11-27 13:19
309 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Seagle.K">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
function setRow(otbl, idx)
{
for (var i=0; i<otbl.rows.length; i++)
{
otbl.rows[i].className = "";
}
if (typeof idx != 'undefined')
{
otbl.rows[idx].className = "focus";
}
}
function getRowIdx(otbl)
{
for (var i=0; i<otbl.rows.length; i++)
{
if (otbl.rows[i].className=="focus")
{
return i;
}
}
return 0;//否则返回首行;
}
function moverow()
{
var keycode = event.keyCode;
var otbl = document.all("tablename");
var rowsLen = otbl.rows.length;
var currentRowIdx = getRowIdx(otbl);
switch (keycode)
{
case 38://↑
if (currentRowIdx == 0 || currentRowIdx == 1)
{//首行
setRow(otbl, rowsLen-1);
}else
{
setRow(otbl, currentRowIdx-1);
}
break;
case 40://↓
if (currentRowIdx == rowsLen-1)
{//首行
setRow(otbl, 1);
}else
{
setRow(otbl, currentRowIdx+1);
}
break;
default:
}
}
function focusrow()
{
var oSrc = event.srcElement;
if (oSrc.offsetParent && oSrc.offsetParent.id == "tablename")
{
var otbl = oSrc.offsetParent;
var rowIdx = (oSrc.parentElement.tagName=='TR')?oSrc.parentElement.rowIndex:oSrc.rowIndex;
if (rowIdx != 0)
{
setRow(otbl, rowIdx);
}
}
}
</script>
<style type="text/css">
tr.focus{
background-color:#CCCCCF;
}
</style>
</head>
<body onkeydown="moverow()" onclick="focusrow()">
<TABLE id="tablename" name="tablename" style="BORDER-COLLAPSE: collapse" borderColor=#000000
cellSpacing=0 cellPadding=0 width="100%" border=1>
<Thead bgColor=#ffffff>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>名称</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>编码</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>类别</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>壮态</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>建档日期</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>建档人</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>顺序号</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>拼音码</FONT></TD></Thead>
<tbody>
<TR id=1
onKeyDown="keykessup(this)" bgColor=#ffffff>
<TD vAlign=center noWrap align=middle width="12%" height=20>科室1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1001</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 20 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
<TR id=2
bgColor=#ffffcc>
<TD vAlign=center noWrap align=middle width="12%" height=20>科室10</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1002</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 21 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>2</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
<TR id=3 ondblclick=""
bgColor=#ffffff>
<TD vAlign=center noWrap align=middle width="12%" height=20>万县</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1008</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 20 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>8</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
<TR id=4 ondblclick=""
bgColor=#ffffcc>
<TD vAlign=center noWrap align=middle width="12%" height=20>长寿</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1009</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 20 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>9</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
</tbody></TABLE>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Seagle.K">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
function setRow(otbl, idx)
{
for (var i=0; i<otbl.rows.length; i++)
{
otbl.rows[i].className = "";
}
if (typeof idx != 'undefined')
{
otbl.rows[idx].className = "focus";
}
}
function getRowIdx(otbl)
{
for (var i=0; i<otbl.rows.length; i++)
{
if (otbl.rows[i].className=="focus")
{
return i;
}
}
return 0;//否则返回首行;
}
function moverow()
{
var keycode = event.keyCode;
var otbl = document.all("tablename");
var rowsLen = otbl.rows.length;
var currentRowIdx = getRowIdx(otbl);
switch (keycode)
{
case 38://↑
if (currentRowIdx == 0 || currentRowIdx == 1)
{//首行
setRow(otbl, rowsLen-1);
}else
{
setRow(otbl, currentRowIdx-1);
}
break;
case 40://↓
if (currentRowIdx == rowsLen-1)
{//首行
setRow(otbl, 1);
}else
{
setRow(otbl, currentRowIdx+1);
}
break;
default:
}
}
function focusrow()
{
var oSrc = event.srcElement;
if (oSrc.offsetParent && oSrc.offsetParent.id == "tablename")
{
var otbl = oSrc.offsetParent;
var rowIdx = (oSrc.parentElement.tagName=='TR')?oSrc.parentElement.rowIndex:oSrc.rowIndex;
if (rowIdx != 0)
{
setRow(otbl, rowIdx);
}
}
}
</script>
<style type="text/css">
tr.focus{
background-color:#CCCCCF;
}
</style>
</head>
<body onkeydown="moverow()" onclick="focusrow()">
<TABLE id="tablename" name="tablename" style="BORDER-COLLAPSE: collapse" borderColor=#000000
cellSpacing=0 cellPadding=0 width="100%" border=1>
<Thead bgColor=#ffffff>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>名称</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>编码</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>类别</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>壮态</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>建档日期</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>建档人</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>顺序号</FONT></TD>
<TD vAlign=center noWrap align=middle width="11%" height=20><FONT
color=#ff0000>拼音码</FONT></TD></Thead>
<tbody>
<TR id=1
onKeyDown="keykessup(this)" bgColor=#ffffff>
<TD vAlign=center noWrap align=middle width="12%" height=20>科室1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1001</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 20 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
<TR id=2
bgColor=#ffffcc>
<TD vAlign=center noWrap align=middle width="12%" height=20>科室10</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1002</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 21 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>2</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
<TR id=3 ondblclick=""
bgColor=#ffffff>
<TD vAlign=center noWrap align=middle width="12%" height=20>万县</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1008</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 20 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>8</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
<TR id=4 ondblclick=""
bgColor=#ffffcc>
<TD vAlign=center noWrap align=middle width="12%" height=20>长寿</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1009</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>05 20 2005
1</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>李伟</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>9</TD>
<TD vAlign=center noWrap align=middle width="12%" height=20>NUll</TD></TR>
</tbody></TABLE>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Qt 键盘上下左右改变控件焦点 （就像桌面上下左右选择一样）
- 给键盘添加确认/剩余字数按钮,并且改变超过剩余个数局部文字颜色
- Flex中如何改变TextInput输入框得到焦点时边框颜色的例子
- VC++深入详解 第十章 绘图控制 用CButtonST类改变按钮控件的背景色及文本颜色 自己实现
- 改变TextInput输入框得到焦点时边框的颜色
- 实现输入框得到焦点时边框颜色改变失去焦点时输入框变回原来的颜色
- WPF DataGrid分页切换时第一行获得焦点，键盘UP、Down方向键可上下移动
- 改变Repeater控件中按钮颜色
- 自己对“改变CButton按钮控件的文本和背景颜色”的理解
- 改变圆角按钮的颜色
- SecureCRT中改变背景色和文字颜色
- 【Android】ListView监听上下滑动（设置滚动监听判断ListView的滚动方向同时获取屏幕高度、ListView实际高度，判断是否需要展示返回顶部按钮（具体逻辑请看代码--附有详细注释）。
- android中自定义view---实现竖直方向的文字功能，文字方向朝上，同时提供接口，判断当前touch的是哪个字符，并改变颜色
- [Android]ListView 设置焦点与选中时改变item颜色
- Javascript点击按钮随机改变数字与其颜色
- 自定义导航条 文字大小颜色等 按钮大小图标等 背景色
- HTML-JavaScript--单击按钮改变背景颜色
- ios UITableViewCell 左滑删除时,改变删除按钮背景颜色
- IOS 改变键盘颜色代码
- Android 点击按钮时改变颜色