Question

我正在尝试创建一个可以执行以下操作的表。

行x Cols = 3x3：ok
通过键盘导航：确定
当div2无法正常工作时，“焦点”（或其他内容）位于单元格更新data-param2:上。
在键盘上按Enter键时，使用data-param1更新div1：无法正常工作

<html>
<head>
  <title>arrows.htm</title>
  <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;
     document.getElementById(b4).style.backgroundColor = "white";
     document.getElementById(rc).style.backgroundColor = "yellow";
     b4 = rc;
    }

    function test(){
     document.getElementById("q").innerHTML=this.id;
    }

    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();
      case VK_ENTER :   
       break;
     }
    }

    </script>
    </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"><img class="imgs" height="100" width="50" class="e" data-param1="666" data-param2="777" src="http://web.scott.k12.va.us/martha2/dmbtest.gif" /></td>
            <td id="r1c2">b0</td>
            <td id="r1c3">c0</td> 
          </tr>
          <tr>
            <td id="r2c1">a1</td>
            <td id="r2c2">b1</td>
            <td id="r2c3">c1</td>
          </tr>
          <tr>
            <td id="r3c1">a2</td>
            <td id="r3c2">b2</td>
            <td id="r3c3">c2</td>
          </tr>
       </table>
      </div>
    <script>
     $(".imgs").click(function(){
      var elmThis = $(this);
      $("#div1").text(elmThis.data("param1"));  
     });
    </script>
  </body>
</html>

Answer 1

我得到了它的工作

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

Answer 2

您好像在使用$.data()而不是html5属性data-yournamehere

如果您想设置或访问它们，请执行以下操作：

$(this).attr('data-param', 'set-the-value-here');

要检索它，只需执行$(this).attr('data-param');

即可

通过键盘导航表？

2 个答案: