html导航栏显示箭头,jquery – 使用箭头键导航HTML表

下面是一个使用onkeydown事件并使用prevIoUsElementSibling和nextElementSibling属性的vanilla JavaScript解决方案.

使用tabindex的问题在于,您无法像在Excel中那样导航,您可以远离电子表格本身.

HTML

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

CSS

table {

border-collapse: collapse;

border: 1px solid black;

}

table td {

border: 1px solid black;

padding: 10px;

text-align: center;

}

JavaScript

var start = document.getElementById('start');

start.focus();

start.style.backgroundColor = 'green';

start.style.color = 'white';

function dotheneedful(sibling) {

if (sibling != null) {

start.focus();

start.style.backgroundColor = '';

start.style.color = '';

sibling.focus();

sibling.style.backgroundColor = 'green';

sibling.style.color = 'white';

start = sibling;

}

document.onkeydown = checkKey;

function checkKey(e) {

e = e || window.event;

if (e.keyCode == '38') {

// up arrow

var idx = start.cellIndex;

var nextrow = start.parentElement.prevIoUsElementSibling;

if (nextrow != null) {

var sibling = nextrow.cells[idx];

dotheneedful(sibling);

}

} else if (e.keyCode == '40') {

// down arrow

var idx = start.cellIndex;

var nextrow = start.parentElement.nextElementSibling;

if (nextrow != null) {

var sibling = nextrow.cells[idx];

dotheneedful(sibling);

}

} else if (e.keyCode == '37') {

// left arrow

var sibling = start.prevIoUsElementSibling;

dotheneedful(sibling);

} else if (e.keyCode == '39') {

// right arrow

var sibling = start.nextElementSibling;

dotheneedful(sibling);

}

html导航栏显示箭头,jquery – 使用箭头键导航HTML表相关推荐

前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
【解决办法】电脑连接了网线能上网但是底部导航栏显示无Internet连接
今天突然发现了这么一个问题,明明自己插了网线,打开浏览器网页都可以正常上网,但是底部导航栏还是显示无Internet连接.(如下图) 真的很想吐槽自家校园网,已经枯了......因为校园网只能够一台设 ...
html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页
方式一:采用iframe,即将网页放入iframe这个容器中. 方式二:采用div的话绑定a或者li的点击事件阻止a的默认行为,用jquery的load()可以来加载这个div,即将网页放入div中 ...
解决手机端微信公众号内input输入框获取焦点后，底部导航栏显示在输入法软键盘上面的问题
今天遇到在微信公众号中打开网站,input 输入框和textarea输入框获取焦点后,弹出输入法键盘,将底部的导航栏"顶到"输入法键盘上面的问题,看着非常shit! 直接上代码看效 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
[高通SDM450][Android9.0]动态控制虚拟导航栏显示与隐藏
文章目录开发平台基本信息问题描述解决方法开发平台基本信息芯片: SDM450 版本: Android 9.0 kernel: msm-4.9 问题描述虚拟导航栏原生默认是显示的,但是,作为 ...
html 导航栏选中状态,jQuery“导航栏点击选中效果“代码
现在的网站菜单导航栏几乎都有点击选中效果,正好今天我在开发项目中也需要用上这样的效果,下面就给大家分享一下,亲测有效,大家放心使用. 1.引入jQuery核心文件 2.加入"jQuery导航 ...
Android R横屏时使虚拟导航栏显示在屏幕底部
在竖屏时,我们的界面是这样的: 如果开启自动旋转,在横屏时,虚拟按键仍然在该位置,显示为屏幕的右侧,现在需求是让横屏时虚拟导航栏跟随调整到屏幕下方,即下图所示: 这时,我们就需要做以下修改 <! ...
html5导航栏向应折叠,超实用！网站导航栏设计形式总结
导航对于一个网站来说,起到重要的引导作用.一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用.下面跟大家分享下常用的几种网页导航形式: 1.顶部导航 ...

html导航栏显示箭头,jquery – 使用箭头键导航HTML表

html导航栏显示箭头,jquery – 使用箭头键导航HTML表相关推荐

最新文章

热门文章