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">

  • 相关阅读:
    dubbo踩坑
    windows下面使用protobuf
    解决端口占用的问题
    建设检验
    统计学资料整理
    java cpu 负载高分析
    演讲/汇报
    管理和领导
    css渐变动画
    vue组件之间互相传值:父传子,子传父
  • 原文地址:https://www.cnblogs.com/Mblog/p/1632243.html
Copyright © 2011-2022 走看看