Fatal编程技术网
  • javascript/
  • Javascript 使用箭头键高亮显示选定行

Javascript 使用箭头键高亮显示选定行

javascript html dom

Javascript 使用箭头键高亮显示选定行,javascript,html,dom,Javascript,Html,Dom,如何修改下面的代码，以便我可以使用箭头键（向上/向下）高亮显示表中的一行。（我已经为单击设置了它，但希望使用箭头键添加功能） 沮丧得难以置信=\ <html> <head> <meta http-equiv="Content-Language" content="en-ca"> <title>Scrolling Data Grid</title> <style> /* ====================

如何修改下面的代码，以便我可以使用箭头键（向上/向下）高亮显示表中的一行。（我已经为单击设置了它，但希望使用箭头键添加功能）

沮丧得难以置信=\

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


滚动数据网格
/* ==================================================================== */
/*滚动数据网格*/
/* ==================================================================== */
DIV.scrollingdatagrid{
溢出-x：自动；
溢出y：自动；
位置：相对位置；
填充：0px；
}
DIV.scrollingdatagrid表{
宽度：98.7%；/*为滚动条腾出空间*/
边际：0px；
边界：0px；
边界塌陷：分离；
}
DIV.scrollingdatagrid表TR.locked，DIV.scrollingdatagrid表THEAD TR，DIV.scrollingdatagrid表TFOOT TR{
位置：相对位置；
}
/*TR的OffsetParent是DIV，因为它是position:relative*/
DIV.scrollingdatagrid表THEAD TR{
top：表达式（this.offsetParent.scrollTop）；
}
/*使z索引值非常清晰，以便按预期发生重叠*/
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；}
window.onload=函数（）{
html=“”
html+='\n'
html+='\n'
html+='\n'
html+='#\n'
html+=“COLUMN1\n”
html+=“COLUMN2\n”
html+=“COLUMN3\n”
html+=“COLUMN4\n”
html+=“COLUMN5\n”
html+=“COLUMN6\n”
html+=“COLUMN7\n”
html+=“COLUMN8\n”
html+=“COLUMN9\n”
html+=“COLUMN10\n”
html+=“COLUMN11\n”
html+=“COLUMN12\n”
html+=“COLUMN13\n”
html+=“COLUMN14\n”
html+=“COLUMN15\n”
html+=“COLUMN16\n”
html+='\n'
html+='\n'
html+='\n'
html+='\n'
html+='1.\n'
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+='\n'
html+='\n'
html+='2.\n'
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+='\n'
html+='\n'
html+='3.\n'
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+='\n'
html+='\n'
html+='4.\n'
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+=“数据\n”
html+='\n'
html+='\n'
html+='\n'
document.getElementById（“p1”）.innerHTML=html
var color=“#E1E0D7”
var rows=document.getElementById（“mstrTable”）.getElementsByTagName（“tr”）；
var n=行数。长度；
var bgcs=[]；

对于（var i=0；i为
keyup
添加一个eventListener，然后检查按下了哪个键

37=左

38=上升

39=右

40=向下