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>

  • 相关阅读:
    ACM-ICPC 2018 徐州赛区网络预赛 Morgana Net
    ACM-ICPC 2018 焦作赛区网络预赛 E. Jiu Yuan Wants to Eat ,树链抛分+线段树
    ACM-ICPC 2018 焦作赛区网络预赛 Poor God Water 矩阵快速幂
    ACM-ICPC 2018 南京赛区网络预赛 E AC Challenge 状压dp
    codeforces 776 D The Door Problem
    codeforces 765 E Tree Folding
    codeforces 765 D Artsem and Saunders
    P2764 最小路径覆盖问题
    SPOJ Count on a tree 主席树+lca
    BZOJ 1066 蜥蜴
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713941.html
Copyright © 2011-2022 走看看