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>

  • 相关阅读:
    WCF客户端获取服务端异常[自定义异常]
    关于VS2013 Browser Link 新功能
    MVC 单元测试xUnit初探
    ASP.NET MVC4中加入Log4Net日志记录功能
    简洁的MVC思想框架——Nancy(Session的使用)
    iOS开发之快速排序算法
    iOS开发之内购的完整流程
    ios面试数据结构与算法
    iOS开发之读取info.plist配置信息
    iOS开发之ARC与非ARC的设置
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713941.html
Copyright © 2011-2022 走看看