点键盘“上下”按钮时得到行的焦点，同时改变颜色背景色

最新推荐文章于 2021-06-16 04:59:48 发布

cuoguo1111

最新推荐文章于 2021-06-16 04:59:48 发布

阅读量1k

点赞数

文章标签： function generator html javascript 2010 border

<!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 οnkeydοwn="moverow()" οnclick="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 οndblclick=""
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 οndblclick=""
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>