键盘上下控制Table 行选择效果

最新推荐文章于 2023-11-17 10:25:17 发布

Teln_小凯

最新推荐文章于 2023-11-17 10:25:17 发布

阅读量444

点赞数

本文链接：https://blog.csdn.net/qq873113580/article/details/108784060

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .actived {
            background-color:yellow;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    
    <script type="text/javascript">
        var index = 0;
        $(function () {
            $("body").keydown(function (e) {
                if (e.keyCode == 38) {
                    //上
                    if ($("#tb .actived").size() == 0) {
                        //默认第一个
                        index = 0;
                    } else {
                        index--;
                        if (index < 0) {
                            index = $("#tb tr").size() - 1;
                        }
                    }
                    $("#tb tr").eq(index).click();
                }
                if (e.keyCode == 40) {
                    //下
                    if ($("#tb .actived").size() == 0) {
                        //默认第一个
                        index = 0;
                    } else {
                        index++;
                        if (index > $("#tb tr").size() - 1) {
                            index = 0;
                        }
                    }
                    $("#tb tr").eq(index).click();
                }
                if (e.keyCode == 13) {
                    if ($("#tb .actived").size() > 0) {
                        //有选中的时候
                        alert("跳转地址：" + $("#tb tr").eq(index).attr("data-src"));
                        window.location.href = $("#tb tr").eq(index).attr("data-src");
                    }
                }
            });
            $("#tb tr").click(function(){
                $("#tb tr").removeClass("actived");
                $(this).addClass("actived");
                index = $(this).index();
            });
        });

    </script>
</head>
<body>
    
    <table id="tb">
        <tr data-src="http://www.baidu.com?v=1">
            <td>第1个</td>
        </tr>
        <tr data-src="http://www.baidu.com?v=2">
            <td>第2个</td>
        </tr>
        <tr data-src="http://www.baidu.com?v=3">
            <td>第3个</td>
        </tr>
        <tr data-src="http://www.baidu.com?v=4">
            <td>第4个</td>
        </tr>
    </table>
</body>
</html>

Teln_小凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键盘上下控制Table 行选择效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .actived { background-color:yellow; } </style> <scr...
复制链接

扫一扫