Javascript 通过键盘浏览表格？_Javascript_Jquery_Html Table

Javascript 通过键盘浏览表格？

javascript jquery

Javascript 通过键盘浏览表格？,javascript,jquery,html-table,Javascript,Jquery,Html Table,我正在试着做一张桌子，可以做以下的事情行x Cols=3x3：正常通过键盘导航：确定当“焦点”（或其他内容）在单元格更新div2时，data-param2:不起作用按键盘上的Enter键时，使用data-param1：不工作更新div1 arrows.htm var b4=“”； var-col=1； var行=1；函数bg（）{ var rc=“r”+行+“c”+列；如果（b4==“”）b4=rc； document.getElementById（b4.style.backgro

我正在试着做一张桌子，可以做以下的事情

行x Cols=3x3：正常

通过键盘导航：确定

当“焦点”（或其他内容）在单元格更新

div2

时，

data-param2:

不起作用

按键盘上的Enter键时，使用data-param1：不工作更新

div1


arrows.htm
var b4=“”；
var-col=1；
var行=1；
函数bg（）{
var rc=“r”+行+“c”+列；
如果（b4==“”）b4=rc；
document.getElementById（b4.style.backgroundColor=“白色”；
document.getElementById（rc.style.backgroundColor=“黄色”；
b4=rc；
}
功能测试（）{
document.getElementById（“q”）.innerHTML=this.id；
}
函数processKeyDown（e）{
var键码；
如果（e.which）{keyCode=e.which；}
否则{
警报（“未知事件类型”）；
返回；
}
processKeyHandle（keyCode）；
}
函数processKeyHandle（keyCode）{
var-nc=0；
开关（钥匙代码）{
案例VK_左：
如果（列>1）列--；
bg（）；
打破
案例VK_UP：
如果（行>1）行--；
bg（）；
打破
案例VK_右：
if（col<3）col++；
bg（）；
打破
案例VK_下降：
如果（第3行）第++；
bg（）；
案例VK_输入：
打破
}
}
测试
测试2
b0
c0
a1
b1
c1
a2
b2
c2
$（“.imgs”）。单击（函数（）{
var elmThis=$（this）；
$（“#div1”）.text（elmThis.data（“param1”）；
});

看起来您使用的是

$.data（）

而不是html5属性

数据yourname here

如果要设置或访问这些，请执行以下操作：

$（this.attr（'data-param'，'set the value here'）
要检索它，只需执行$（this.attr（'data-param'）
我让它工作了
<html>
<head>

</head>
<body onload="bg()" onkeydown="processKeyDown(event);" >
<div id="div1">test</div>
<div id="div2">test2</div>
<div>
    <table border="1" id="tab">
        <tr>
            <td id="r1c1" data-param1="r1c1 param1" data-param2="r1c1 param2">a0</td>
            <td id="r1c2" data-param1="r1c2 param1" data-param2="r1c2 param2">b0</td>
            <td id="r1c3" data-param1="r1c3 param1" data-param2="r1c3 param2">c0</td>
        </tr>
        <tr>
            <td id="r2c1" data-param1="r2c1 param1" data-param2="r2c1 param2">a1</td>
            <td id="r2c2" data-param1="r2c2 param1" data-param2="r2c2 param2">b1</td>
            <td id="r2c3" data-param1="r2c3 param1" data-param2="r2c3 param2">c1</td>
        </tr>
        <tr>
            <td id="r3c1" data-param1="r3c1 param1" data-param2="r3c1 param2">a2</td>
            <td id="r3c2" data-param1="r3c2 param1" data-param2="r3c2 param2">b2</td>
            <td id="r3c3" data-param1="r3c3 param1" data-param2="r3c3 param2">c2</td>
        </tr>
    </table>
</div>
<script language="javascript" type="text/javascript" src="js/keycode.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

<script type="text/javascript">
var b4 = "";
var col = 1;
var row = 1;

function bg() {
    var rc = "r" + row + "c" + col;
    if (b4 == "") b4 = rc;
    $("#"+b4).css("backgroundColor","white");
    $("#div2").text($("#"+rc).css("backgroundColor","yellow").data("param2"));
    b4 = rc;
}


function processKeyDown(e) {
    var keyCode;

    if(e.which) { 
        keyCode = e.which;
    } else {
        alert("Unknown event type.");
        return ;
    }

    processKeyHandle(keyCode);

}

function processKeyHandle(keyCode) {
    var nc = 0;
    switch(keyCode) {
    case VK_LEFT :
        if (col > 1) col--;
        bg();
        break;
    case VK_UP :
        if (row > 1) row--;
        bg();
        break;
    case VK_RIGHT :
        if (col < 3) col++;
        bg();
        break;
    case VK_DOWN :  
        if (row < 3) row++;
        bg();
        break;
    case VK_ENTER : 
        $("#div1").text($("#"+b4).data("param1"));
        break;
    }
}


</script>
</body>
</html>


测试
测试2
a0
b0
c0
a1
b1
c1
a2
b2
c2
var b4=“”；
var-col=1；
var行=1；
函数bg（）{
var rc=“r”+行+“c”+列；
如果（b4==“”）b4=rc；
$（“#”+b4）.css（“背景色”、“白色”）；
$（“#div2”）.text（$（“#”+rc）.css（“背景色”、“黄色”）.data（“参数2”）；
b4=rc；
}
函数processKeyDown（e）{
var键码；
如果（e.which）{
keyCode=e.which；
}否则{
警报（“未知事件类型”）；
返回；
}
processKeyHandle（keyCode）；
}
函数processKeyHandle（keyCode）{
var-nc=0；
开关（钥匙代码）{
案例VK_左：
如果（列>1）列--；
bg（）；
打破
案例VK_UP：
如果（行>1）行--；
bg（）；
打破
案例VK_右：
if（col<3）col++；
bg（）；
打破
案例VK_下降：
如果（第3行）第++；
bg（）；
打破
案例VK_输入：
$（“#div1”）.text（$（“#”+b4）.data（“param1”）；
打破
}
}
我有个问题。为什么要加载jquery，然后使用普通的方式获取元素？如果我不这样做，它就不起作用了。javaScript/jquery有点新，最好先阅读jquery教程，然后再阅读jquery中的keydown函数导航功能。但这样做时，我无法更新。VK_DOWN案例末尾没有中断，而您的VK_ENTER案例中没有任何内容。你必须展示你所拥有的，然后人们可以告诉你要改变什么，使之正确。但我不认为有人只是在这里编码你的功能
<html>
<head>

</head>
<body onload="bg()" onkeydown="processKeyDown(event);" >
<div id="div1">test</div>
<div id="div2">test2</div>
<div>
    <table border="1" id="tab">
        <tr>
            <td id="r1c1" data-param1="r1c1 param1" data-param2="r1c1 param2">a0</td>
            <td id="r1c2" data-param1="r1c2 param1" data-param2="r1c2 param2">b0</td>
            <td id="r1c3" data-param1="r1c3 param1" data-param2="r1c3 param2">c0</td>
        </tr>
        <tr>
            <td id="r2c1" data-param1="r2c1 param1" data-param2="r2c1 param2">a1</td>
            <td id="r2c2" data-param1="r2c2 param1" data-param2="r2c2 param2">b1</td>
            <td id="r2c3" data-param1="r2c3 param1" data-param2="r2c3 param2">c1</td>
        </tr>
        <tr>
            <td id="r3c1" data-param1="r3c1 param1" data-param2="r3c1 param2">a2</td>
            <td id="r3c2" data-param1="r3c2 param1" data-param2="r3c2 param2">b2</td>
            <td id="r3c3" data-param1="r3c3 param1" data-param2="r3c3 param2">c2</td>
        </tr>
    </table>
</div>
<script language="javascript" type="text/javascript" src="js/keycode.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

<script type="text/javascript">
var b4 = "";
var col = 1;
var row = 1;

function bg() {
    var rc = "r" + row + "c" + col;
    if (b4 == "") b4 = rc;
    $("#"+b4).css("backgroundColor","white");
    $("#div2").text($("#"+rc).css("backgroundColor","yellow").data("param2"));
    b4 = rc;
}


function processKeyDown(e) {
    var keyCode;

    if(e.which) { 
        keyCode = e.which;
    } else {
        alert("Unknown event type.");
        return ;
    }

    processKeyHandle(keyCode);

}

function processKeyHandle(keyCode) {
    var nc = 0;
    switch(keyCode) {
    case VK_LEFT :
        if (col > 1) col--;
        bg();
        break;
    case VK_UP :
        if (row > 1) row--;
        bg();
        break;
    case VK_RIGHT :
        if (col < 3) col++;
        bg();
        break;
    case VK_DOWN :  
        if (row < 3) row++;
        bg();
        break;
    case VK_ENTER : 
        $("#div1").text($("#"+b4).data("param1"));
        break;
    }
}


</script>
</body>
</html>