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>

  • 相关阅读:
    旋转数组的最小数字
    Redis常用方法
    用两个栈实现队列
    Spark1.4启动spark-shell时initializing失败
    从尾到头打印链表
    Hbase的安装(hadoop-2.6.0,hbase1.0)
    执行sh文件 进行MongoDB的业务逻辑导入
    Scala第二章学习笔记
    替换空格
    二维数组中的查找
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713941.html
Copyright © 2011-2022 走看看