javascript上下方向键控制表格行选中并高亮显示的方法
本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法。分享给大家供大家参考。具体实现方法如下：
<style>
tr.highlight{
background:#08246B;
color:white;
}
</style>
<tableborder="1"width="70%"id="ice">
<tronClick="selectTR();returnfalse;">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tronClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tronClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tronClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tronClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
</table>
<scriptlanguage="javascript">
<!--
varcurrentLine=-1;
document.onkeydown=function(e)
{
e=window.event||e;
switch(e.keyCode)
{
case38:
currentLine--;
changeItem();
break;
case40:
currentLine++;
changeItem();
break;
default:
break;
}
}
functionselectTR()
{
currentLine=window.event.srcElement.parentElement.rowIndex;
//alert(currentLine);
changeItem();
}
//改变选择项目
functionchangeItem()
{
if(document.all)
varit=document.getElementById("ice").children[0];
else
varit=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程序设计有所帮助。