Javascript: document.getElementbyID (..) является нулевым или нет объектом

Я не могу понять, почему приведенный ниже код javascript дает мне document.getelementbyid является нулевым или нет объектом в этой строке: 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

EW. это страшно. прямое обращение к файлу базы данных sql никогда не является хорошей идеей для веб-клиента. –

можете ли вы разместить код, полученный в браузере? (без логики на стороне сервера) – fcalderan

Является ли это просто мной или является youre 'getElementById()' выполняется в блоке, который не ждет readyState ... – canon

Вы вызываете write_it() в ответ на страницу load, которая запускается после полной установки DOM и полной загрузки всех изображений и подкадров. Дополнительную информацию см. На странице документа MDN window.onload, когда onload пожаров.

Однако, ваш звонок getElementById стреляет немедленно, как только будет создано ваше исполнение JavaScript, до создания DOM. Поскольку функция write_it создает таблицу, которую вы пытаетесь выбрать onload, и она запускается после вашего вызова getElementById, таблица не существует, когда вы пытаетесь ее выбрать.

Вы должны переместить весь свой код в функцию write_it, чтобы ни одна из них не работала до тех пор, пока не будет построена DOM.

источник

2012-06-22 13:27:20 apsillers

Я пробовал это, но в выводе я получаю: document.getElementById («p1»). InnerHTML = html}, а затем пустой поле div? –

он не находит свой элемент, так как он создается в onload случае, который запускается, когда весь документ легок д. Это значит, что он создан ПОСЛЕ ваша неисправная строка кода выполнена.

источник

2012-06-22 13:25:10 Amberlamps

Javascript: document.getElementbyID (..) является нулевым или нет объектом

ответ

Смежные вопросы