使用上下键达到表格行元素切换效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_23834457/article/details/94379326

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

<style type="text/css">
    .buddyListHighLight{
        background-color: #2be81c;
    }
    .buddyList{
        background-color: white;
    }
</style>
<SCRIPT LANGUAGE="JavaScript">
    var currentLine = 0;
    var $=function(id){
        return document.getElementById(id);
    };
    $('buddyListTable').children[0].rows[currentLine].className = "buddyListHighLight";
    function keyDownEvent(e){
        var e = window.event||e;
        if(e.keyCode==38){
            currentLine--;
            changeItem();
        }else if(e.keyCode==40){
            currentLine++;
            changeItem();
        }
        return false;
    }
    function changeItem(){
        if(!$('buddyListTable')) return false;
        var it = $('buddyListTable');
        if(document.all){
            it = $('buddyListTable').children[0];
        }
        changeBackground();
        if(currentLine<1) currentLine = it.rows.length-1;
        if(currentLine >= it.rows.length) currentLine = 1;
        it.rows[currentLine].className = "buddyListHighLight";
    }
    function changeBackground(){
        var it = $('buddyListTable');
        if(document.all){
            it = $('buddyListTable').children[0];
        }
        for(var i=1; i<it.rows.length; i++){
                it.rows[i].className = "buddyList";
        }
    }
</SCRIPT>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" id="buddyListTable"><tbody>
<tr class="buddyListOdd" οnkeyup="return keyDownEvent(event);">

    <td align="left" valign="middle">我是第一行</td>
    <td align="left">哦哦</td>
</tr>
<tr class="buddyListEven">
 
    <td align="left" valign="middle">我是第二行</td>
    <td align="left">哈哈</td>
</tr>
</tbody>
</table>
</body>
</html>