矢印キー (上/下) を使用してテーブルの行を強調表示できるように、以下のコードをどのように変更できますか。（すでにクリック用にセットアップしていますが、矢印キーを使用して機能を追加したいと考えています）。
信じられないほどイライラします。=\
<html>
<head>
<meta http-equiv="Content-Language" content="en-ca">
<title>Scrolling Data Grid</title>
<style>
/* ==================================================================== */
/* SCROLLING DATA GRID */
/* ==================================================================== */
DIV.scrollingdatagrid {
overflow-x:auto;
overflow-y:auto;
position:relative;
padding:0px;
}
DIV.scrollingdatagrid TABLE {
width : 98.7%; /* Make room for scroll bar! */
margin:0px;
border:0px;
border-collapse:separate;
}
DIV.scrollingdatagrid TABLE TR .locked, DIV.scrollingdatagrid TABLE THEAD TR, DIV.scrollingdatagrid TABLE TFOOT TR {
position:relative;
}
/* OffsetParent of the TR is the DIV because it is position:relative */
DIV.scrollingdatagrid TABLE THEAD TR {
top:expression(this.offsetParent.scrollTop);
}
/* Make the z-index values very clear so overlaps happen as expected! */
DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; }
DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; }
DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; }
DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; }
</style>
<script type="text/javascript">
window.onload = function() {
html = ''
html += '<table id="mstrTable" style="table-layout: fixed; font-family: arial; font-size: 9pt;" cellpadding="0" cellspacing="0">\n'
html += '<thead>\n'
html += '<tr>\n'
html += '<th class="locked" style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); text-align: center; height: 30px; width: 20px; color: rgb(102,102,102); background-color: rgb(212,208,200);">#</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN1</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN2</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN3</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN4</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN5</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN6</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN7</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN8</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN9</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN10</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN11</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN12</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN13</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN14</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN15</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: none; padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);"> COLUMN16</th>\n'
html += '</tr>\n'
html += '</thead>\n'
html += '<tbody>\n'
html += '<tr style="color: rgb(102,102,102)">\n'
html += '<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">1.</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '</tr>\n'
html += '<tr style="color: rgb(102,102,102)">\n'
html += '<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">2.</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '</tr>\n'
html += '<tr style="color: rgb(102,102,102)">\n'
html += '<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">3.</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '</tr>\n'
html += '<tr style="color: rgb(102,102,102)">\n'
html += '<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">4.</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
html += '</tr>\n'
html += '</tbody>\n'
html += '</table>\n'
document.getElementById("p1").innerHTML = html
var color = "#E1E0D7"
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
function changeColor(e) {
if(!e) e = window.event;
var o = e.target? e.target: e.srcElement;
while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
for(var i=0; i<n; ++i) {
rows[i].style.backgroundColor = bgcs[i];
if(rows[i]==o) {
rows[i].style.backgroundColor = color;
}//end of if
}//end of for
}//end of function
if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
}//end of onload
</script>
</head>
<body>
<div id="p1" class="scrollingdatagrid" style="width:800px;height:200px;border:1px solid rgb(128,128,128);"></div>
</body>
</html>