zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    搭建好lamp,部署owncloud。
    部署LAMP环境搭建一个网站论坛平台
    二进制编译安装httpd服务
    安装httpd服务并配置
    FTP的应用
    Linux配置IP,安装yum源
    RHEL-server-7.0-Linux-centos安装过程
    zabbix监控某一进程
    python获取windows系统的CPU信息。
    python相关cmdb系统
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713941.html
Copyright © 2011-2022 走看看