JS上下左右键在GridView 中移动焦点

本文介绍了一个使用键盘方向键来导航网页表格的方法。通过JavaScript实现,允许用户通过上下左右箭头键在表格单元格间移动焦点,提高用户体验。适用于无障碍设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var X = 1;
var Y =6;
var rowLen = 0;
var cellLen = 0;
function init() {
    var  GridView2=document.getElementById ("GridView2");
    //GridView2.rows[1].cells[6].all[0].focus();
    X = 1;
    Y = 6;
    rowLen = GridView2.rows.length - 1;
    cellLen = GridView2.rows[1].cells.length - 1;
}
document.onkeydown = keyDown;
function keyDown() {
    var keycode = event.keyCode;
    if ( keycode == 37
        || keycode == 38
        || keycode == 39
        || keycode == 40 ) {
        if ( keycode == 37 ) {
            if (Y > 6) {
                Y--;
            }
            changeActiveObj(X, Y);
        }
        if ( keycode == 38 ) {
            if (X > 0) {
                X--;
            }
            changeActiveObj(X, Y);
        }
        if ( keycode == 39 ) {
            if (Y < cellLen) {
                Y++;
            }
            changeActiveObj(X, Y);
        }
        if ( keycode == 40 ) {
            if (X < rowLen) {
                X++;
            }
            changeActiveObj(X, Y);
        }
    }
}
function changeActiveObj(X, Y) {
  
    eval("document.getElementById ('GridView2').rows[" + X + "].cells[" + Y + "].all[0]").focus();
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值