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>

posted @ 2008-08-07 19:22  网事  阅读(233)  评论(0编辑  收藏  举报