RobyRen

成长历程，一步一个脚印！

Table上下方向键控制选项

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript方向键使用</title>
<style> 
tr.highlight{ 
background:#08246B; 
color:white; 
} 
</style> 
</head>
<body>
        <table border="1" width="70%" id="ice">
            <tr>
                <td>
                    北京</td>
            </tr>
            <tr>
                <td>
                    上海</td>               
          </tr>
            <tr>
                <td>
                    天津</td>                
          </tr>
            <tr>
                <td>
                    河北</td>                
          </tr>
        </table>
        <div id="divshow"></div>
   
<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 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"; 
document.getElementById("divshow").innerHTML = it.rows[currentLine].cells[0].innerText;//取值
}
//--> 
</script>
</body>
</html>

posted on 2009-09-19 09:15  イモツホヌ  阅读(749)  评论(1)    收藏  举报

导航