预期的对象错误时书面方式表动态

我试图动态地写我的表（供以后后端数据库使用），当我点击任何我得到一个“期望对象”错误在点击我的页面上的“LOAD”按钮后进入按钮。理论上它应该工作，因为我已经将我的表格写入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>

来源

2013-03-07 John Smith

请尽量跌停代码的相关章节。如果您不确定哪些是相关部分，请花一些时间先尝试自己弄清楚。 – 2013-03-07 15:54:00

我意识到这不在问题的范围内，但我会避免使用如此多的字符串连接和innerHTML。 http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html AND en.wikipedia.org/wiki/Immutable_object只是我的2¢ – 2013-03-07 16:41:37

你的函数声明为在writein()，因此他们只能在writein()范围是可见的了。

了一个quickfix是使用一个函数表达式，它可以使GoTo()全球：

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

也许来解决这个问题的最好办法是去除在线事件监听器的按钮，并与它们附加addEventListener()里面的writein()。只是围住input S（而不是一个具有价值LOAD）在<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-07 16:03:44 Teemu

嗨特姆，什么会为此编码？听起来很有希望。 – 2013-03-07 16:20:29

预期的对象错误时书面方式表动态

回答

相关问题