Menu
I'm trying to make a table that can do the following.
div2 with the data-param2: not working.div1 with data-param1: not working<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>
852
To go directly to a tab, press its KeyTip. To move in the group that's currently selected, press the Down arrow key. To move between groups on a ribbon, press Ctrl+Right or Left arrow key. To move between commands within a group, press the Tab key or Shift+Tab.
Within a table, the [Tab] key is used to move between cells, rather than for its traditional function of inserting tabs. For information on how to set tabs, refer to Setting Tabs.
Move to the next or previous rowTo move to the next row in a table, press the down arrow. To move to the previous row in a table, press the up arrow.
Position the insertion point in the row you want to move or select the rows you want to move. While holding down the Shift and Alt keys, press the Up Arrow or Down Arrow to move the row.
I got it to 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With