將JavaScript集成到DOM的正文代碼中

-1
我需要Javascript專家的幫助。將JavaScript集成到DOM的正文代碼中
一旦執行函數write_it（），我似乎無法如何確定如何將下面的代碼集成到DOM中。此代碼允許用戶點擊一行並使其突出顯示。
這裏是需要插入下面的代碼（在某種程度上）代碼：
你應該通過頂部 <script>塊移動到你的HTML文檔的 <head>部分開始的
<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; 
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> 
<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); 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);">' + 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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: 110px; 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; text-align: center; 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>
來源
2012-06-22 Jason Kelly