zoukankan      html  css  js  c++  java
  • 键盘上下键选择表格行的代码

    //这是要操作的表格:

    <table id="tb">
    <tr><td>这是第一行</td>   </tr>
    <tr><td>这是第二行</td>   </tr>
    <tr><td>这是第三行</td></tr>
    <tr><td>这是第四行</td></tr>
    </table>

    //这是操作表格的代码
    <script>
    var rowNo= -1;
    var tableId = 'tb';
    var inputId = 'show';
    var selectedColor = "#FF0000"
    function document.onkeydown()
    {

        //事件的标识代码
        if (event.keyCode == 38)
        {
            for(var k=0;k<document.getElementById(tableId).rows.length;k++)
            {
                document.getElementById(tableId).rows(k).bgColor="#FFFFFF";
            }
            if(rowNo == 0)
            {
                rowNo++;
            }
            document.getElementById(tableId).rows(--rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor;
            document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText;
        }

      //事件的标识代码
        if (event.keyCode== 40)
        {
            for(var k=0;k<document.getElementById(tableId).rows.length;k++)
            {
                document.getElementById(tableId).rows(k).bgColor="#FFFFFF";
            }
            document.getElementById(tableId).rows(++rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor;

            document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText;
        }
    }
    </script>

    <input type="text" id="show" value="do">

  • 相关阅读:
    Web存储
    JavaScript模块化
    jQuery挖源码——事件绑定
    观察者模式——JavaScript
    Node.js之网络小爬虫
    ECMAScript的严格模式
    JavaScript和jQuery的事件
    认识Ajax
    Redis之intset数据结构
    Redis之Hash数据结构
  • 原文地址:https://www.cnblogs.com/Mblog/p/1632243.html
Copyright © 2011-2022 走看看