1. 首页
  2. 问答
  3. Javascript：document.getElementbyID（..）为空或不是对象

Javascript：document.getElementbyID（..）为空或不是对象

2012-06-22 83 views
0

我似乎无法确定为什么下面的JavaScript代码给了我document.getelementbyid为null或不在此行上的对象： line ：111.据我所知，所有的应该是工作的香港专业教育学院宣布一切Javascript：document.getElementbyID（..）为空或不是对象

var rows = document.getElementById("mstrTable").getElementsByTagName("tr");

下面是完整的代码：

<html> 
<head> 
    <title>Scrolling Data Grid</title> 
<style> 
/* ==================================================================== */ 
/* SCROLLING DATA GRID - IE ONLY!          */ 
/* ==================================================================== */ 
/* 
Tables inside a scrollingdatagrid should have: 
1. border-collapse:separate 
2. No border or margin 
3. Background colors on all cells to avoid bleed-thru on scroll 
4. cellspacing="0" on the <table> tag itself 
*/ 
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(){ write_it() } 

function write_it() { 

var cn  = new ActiveXObject("ADODB.Connection") 
var rs  = new ActiveXObject("ADODB.Recordset") 
var dbFile = "imts.mdb" 
var dbPath = "G:\\AS\\Asf\\ASF\\IMTS\\V8\\database\\" 

var mySQL = "SELECT * FROM tbl_imts WHERE [FILE NUMBER] LIKE '%99%'" 
var html = "" 

cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbFile + ""); 
rs.Open(mySQL, cn, 1, 3) 

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); padding-left: 5px; 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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(0).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(1).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(2).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(3).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(4).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(5).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(6).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(7).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(8).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(9).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(10).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(11).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(12).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(13).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(14).name + '</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: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(15).name + '</th>\n' 
html += '</tr>\n' 
html += '</thead>\n' 

rs.MoveFirst 
var i = 0 
html += '<tbody>\n' 
while (!rs.eof) { 
++i 
    html += '<tr style="color: rgb(102,102,102)">\n' 
    html += '<td class="locked" style="height: 20px; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">'+i+'.</td>\n' 
    for (var r = 0; r < rs.fields.count; ++r) { 
    if (!rs.fields(r).value) { rs.fields(r).value = "&nbsp;" } 
    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;">'+rs.fields(r).value+'</td>\n' 
    }//end of for 
    html += '</tr>\n' 
    rs.MoveNext 
    }//end of while 
html += '</tbody>\n' 
html += '</table>\n' 
document.getElementById("p1").innerHTML = html 
} 
</script> 
</head> 

<body> 

<div id="p1" class="scrollingdatagrid" style="width:800px;height:200px;border:1px solid rgb(128,128,128);"></div> 

<script type="text/javascript"> 
(function() { 
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; 
//rows[0].style.backgroundColor = color; 
function changeColor(e) { 
if(!e) e = window.event; 
var o = e.target? e.target: e.srcElement; 
if (o.tagName == "TH") { return } 
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 
       } 
} 
} 
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); 
})(); 
</script> 














</body> 
</html>

来源

2012-06-22 Jason Kelly

+7

EW。这是可怕的。直接调用sql数据库文件从Web客户端永远不是一个好主意。 –

+0

你能在浏览器上收到代码吗？ （无服务器端逻辑） – fcalderan

+0

难道只是我或者是您选择'的getElementById（）'块中的不等待的readyState ... – canon

回答

2

您在致电write_it()以响应页面的load，该页面在完全构建DOM并且所有图像和子帧完全加载后触发。有关onload火灾时的更多信息，请参阅MDN window.onload文档页面。

但是，您的getElementById调用立即触发，只要您的JavaScript执行环境已设置好，在构建DOM之前。由于write_it函数创建你想选择onload表，它的getElementById电话后运行，该表还没有当您尝试选择它存在。

您应该所有的代码移动到write_it功能，因而没有运行，直到DOM建成后。

来源

2012-06-22 13:27:20 apsillers

+0

我试过了，但在输出中，我得到：'的document.getElementById（‘P1’）的innerHTML = HTML}，然后一个空白格框。？ –

4

它不会找到你的元素，因为它是在onload事件创建，当整个文档被加载时触发d。这意味着它被创建了AFTER您的错误代码行被执行。

来源

2012-06-22 13:25:10 Amberlamps

相关问题

 相关问题