All geek questions in one place

Move table through keyboard?

I am trying to make a table that can do the following.

  • String x Cols = 3x3: ok
  • Keyboard Navigation: ok
  • When the "focus" (or something) is on updating the cell div2 , when data-param2: does not work.

  • When you press Enter on your keyboard, update div1 with the parameter data-param1: not working

    arrows.htm

    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>

+6
source share
2 answers

I got it for work

 <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>
+1
source

It looks like you are using the attributes $.data() not html5 data-yournamehere

If you want to install or access them, follow these steps:

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

To get it, just do $(this).attr('data-param');

0
source

Source: https://habr.com/ru/post/921708/

More articles:


All Articles