0

我正在尝试动态编写我的表（供以后使用后端数据库），并且在单击页面上的“加载”按钮后单击任何转到按钮时出现“预期对象”错误。理论上它应该可以工作，因为我已将表格写入 HTML 文档的正文。我看不出我在这里做错了什么：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#mstrWrapper {
        position: relative;
        height: 200px;
        width: 800px;
        border: 1px solid #808080;

        overflow-y: scroll;
        overflow-x: scroll;
        scrollbar-base-color: #DFDFDF;
        scrollbar-arrow-color: #235A81;

}

#mstrTable {
        width: 800px;
        color: #235A81;
        font-family: Arial;
        font-size: 9pt;
        border: 0px;
}

#mstrTable th, #mstrTable td {
        border-bottom: 1px solid #808080;
        border-right: 1px solid #808080;
        padding: 3px;
}

#mstrTable th {
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
        width: 110px;
        height: 18px;
        border-bottom: 1px solid #808080;
        border-top: 0px;
}

#mstrTable thead tr {
        position: absolute;
        top: expression(this.offsetParent.scrollTop);
}


#mstrTable tbody tr:first-child td {
        padding: 28px 3px 3px 3px;
}
#mstrTable tr.normal td {
    color: #235A81;
    background-color: white;
}
#mstrTable tr.highlighted td {
    color: #FFFFFF;
    background-color: #235A81;
}

</style>

</head>

<body>
<div id="mstrWrapper"></div>

<script type="text/javascript">

function writeit() {
var strVar=" <table id='mstrTable' cellspacing=\"0\" cellpadding=\"0\">";
strVar += "     <thead>";
strVar += "      <tr> ";
strVar += "        <th>File Number<\/th>";
strVar += "        <th>Date1<\/th>";
strVar += "        <th>Date2<\/th>";
strVar += "        <th>Status<\/th>";
strVar += "        <th>Num.<\/th>";
strVar += "      <\/tr>";
strVar += "    <\/thead>";
strVar += "    <tbody>";
strVar += "      <tr> ";
strVar += "        <td>KABC<\/td>";
strVar += "        <td>09\/12\/2002<\/td>";
strVar += "        <td>09\/12\/2002<\/td>";
strVar += "        <td>Submitted<\/td>";
strVar += "        <td>0<\/td>";
strVar += "";
strVar += "      <\/tr>";
strVar += "      <tr> ";
strVar += "        <td>KCBS<\/td>";
strVar += "        <td>09\/11\/2002<\/td>";
strVar += "        <td>09\/11\/2002<\/td>";
strVar += "        <td>Lockdown<\/td>";
strVar += "        <td>2<\/td>";
strVar += "      <\/tr>";
strVar += "";
strVar += "      <tr> ";
strVar += "        <td>WFLA<\/td>";
strVar += "        <td>09\/11\/2002<\/td>";
strVar += "        <td>09\/11\/2002<\/td>";
strVar += "        <td>Submitted<\/td>";
strVar += "        <td>1<\/td>";
strVar += "      <\/tr>";
strVar += "      <tr> ";
strVar += "        <td>WPPP<\/td>";
strVar += "        <td>03\/19\/2003<\/td>";
strVar += "        <td>03\/19\/2003<\/td>";
strVar += "        <td>In-Progress<\/td>";
strVar += "";
strVar += "        <td>0<\/td>";
strVar += "      <\/tr>";
strVar += "      <tr> ";
strVar += "        <td>WRRR<\/td>";
strVar += "        <td>02\/19\/2002<\/td>";
strVar += "        <td>02\/19\/2002<\/td>";
strVar += "        <td>Submitted<\/td>";
strVar += "        <td>5<\/td>";
strVar += "";
strVar += "      <\/tr>";
strVar += "      <tr> ";
strVar += "        <td>WTTT<\/td>";
strVar += "        <td>02\/19\/2002<\/td>";
strVar += "        <td>02\/19\/2002<\/td>";
strVar += "        <td>In-Progress<\/td>";
strVar += "        <td>0<\/td>";
strVar += "      <\/tr>";
strVar += "";
strVar += "      <tr> ";
strVar += "        <td>WYYD<\/td>";
strVar += "        <td>02\/11\/2002<\/td>";
strVar += "        <td>02\/11\/2002<\/td>";
strVar += "        <td>Submitted<\/td>";
strVar += "        <td>7<\/td>";
strVar += "      <\/tr>";
strVar += "      <tr> ";
strVar += "        <td>WRRR<\/td>";
strVar += "";
strVar += "        <td>02\/19\/2002<\/td>";
strVar += "";
strVar += "        <td>02\/19\/2002<\/td>";
strVar += "        <td>Submitted<\/td>";
strVar += "        <td>5<\/td>";
strVar += "      <\/tr>";
strVar += "    <\/tbody>";
strVar += "";
strVar += "    <\/table>";

document.getElementById('mstrWrapper').innerHTML = strVar

var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh;

tbody.onclick = function (e) {
  e = e || window.event;
  var td = e.target || e.srcElement; //assumes there are no other elements inside the td
  var row = td.parentNode;
  if (ishigh&&ishigh!=row){
    ishigh.className='';
  }
  row.className = row.className==="highlighted" ? "" : "highlighted";
  ishigh=row;
}

thead.onclick = function (e) {
  e = e || window.event;
  var th = e.target || e.srcElement;  //assumes there are no other elements in the th
  //alert(th.innerHTML);  ### FOR LATER (DB BACK END USE) ###
}
document.onkeydown = function(e){
    e = e || event;
    var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
    if(code === 38){ //up arraow
        newhigh = rowindex(ishigh) - 2;
        if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
        return GoTo('mstrTable', newhigh);
    } else if (code === 40){ //down arrow
        newhigh = rowindex(ishigh);
        if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
        return GoTo('mstrTable', newhigh);
    }
}

function GoTo(id,nu){
  var obj=document.getElementById(id),
      trs=obj.getElementsByTagName('TR');
  nu = nu + 1;
  if (trs[nu]){
    if (ishigh&&ishigh!=trs[nu]){
      ishigh.className='';
    }
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
    ishigh=trs[nu];
   }
}

function rowindex(row){
    var rows = table.rows, i = rows.length;
    while(--i > -1){
        if(rows[i] === row){return i;}
    }
}

}//end of nested function
</script>
<input type="button" name="" value="GoTo 0" onmouseup="GoTo('mstrTable',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="GoTo('mstrTable',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="GoTo('mstrTable',2);" />
<input type="button" name="" value="GoTo 3" onmouseup="GoTo('mstrTable',3);" />
<br>
<input type="button" value="LOAD" onclick="writeit()">

</body>

</html>
4

1 回答 1

0

您的函数在 中声明，writein()因此它们也仅在 的范围内可见writein()。

一个快速修复将是使用一个函数表达式，它可以使GoTo()全局：

GoTo = function (id,nu) {...

也许解决问题的最佳方法是删除按钮的在线事件监听器，并将它们附加addEventListener()到writein(). input只需将s （不是带有 value 的那个）括LOAD在 a 中<div id="inputs">，然后您就可以执行以下操作：

//end of nested function
var inputs = document.getElementById('inputs').getElementsByTagName('input');
for (var n = 0; n < inputs.length; n++) {
    inputs[n].addEventListener('click', (function (x) {
        return function () {GoTo('mstrTable', x);}
    }(n)), false);      
}
于 2013-03-07T16:03:44.483 回答