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

本文实例讲述了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程序设计有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， 方法
， 高亮显示
， 选中
， 控制
， 表格行
上下方向键
linux 上下左右方向键、键盘上下方向键不能用、上下方向键、上下左右方向键、键盘方向键上下移动，以便于您获取更多的相关知识。