NTML-Javascriptでのデータ受け渡し

質問

HTMLのプログラムでJavaScriptを外部処理にして以下のようにグラフィックデータを配列に入れ、一括で登録しHTML内でデータテーブルのオフセット値からデータを得ようとしましたがうまくいきません。
ページがロードされた時にデータを一括で読もうとしているのですが、デバッグのためにDocument.writeで処理の入り口と出口で文字を表示させましたが、入り口の方しか表示されず、処理が正しく行われていないようです。
どのようにすればうまくデータを得ることができますでしょうか？
----JavaScript----
var imgData = [
"img/01.gif",
"img/02.gif",
"img/03.gif",
"img/04.gif",
"img/05.gif",
"img/06.gif",
"img/07.gif",
"img/08.gif",
：
：
]
imgTbl = new Array();
for(var i=0; i<imgData.length-1; i++){
imgTbl[i] = new Image();
imgTbl[i].src = imgData[i];
}
window.onload=function(){
ImageInit(imgData.length);
}

function ImageInit(no){
for(var i=0; i<no; i++){
document.write("IN..."+i+"<br>"); <--コチラは表示されます。
imageSetSrc(i);
document.write("OUT..."+i+"<br>"); <--コチラは表示されません。
}
}

function imageSetSrc(i){
document.getElementById(i).setAttribute("src", imgData[i]);
}
-----------------------------------------------------
----HTML----
：
：
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=0 src="ImageSetSrc(0)" width="758" "80"></td> <--仮にデータのオフセットを０としています。
</tr>
:
:
</table>

回答No.1

fujillin

直接の原因はdocument.writeを使用しているので、HTMLソースがキャンセルされてしまうからだと思われます。

あと、いろいろ…
for(var i=0; i<imgData.length-1; i++){　は-1は不要では？
<td id=0 src="ImageSetSrc(0)" width="758" "80">　の80はheightなのか？
ここにsrc="ImageSetSrc(0)"と書いても、ImageSetSrc(0)というファイルを探しにいくだけ。スクリプトで書き換えるのだから不要では？

それと、idは数字で始まるのは不可ではなかったっけ？（←曖昧：通じるみたいだけど…）

省略しているところもどうなっているのか不明ですが、とりあえずfunction ImageInitを以下のようにすれば動くのでは？（最後にまとめて表示させています）
function ImageInit(no){
var mes='<p>';
for(var i=0; i<no; i++){
mes += "IN..."+i+"<br>";
imageSetSrc(i);
mes += "OUT..."+i+"<br>";
}
var e = document.createElement('div');
e.innerHTML = mes;
document.body.appendChild(e);
}

お礼

HTMLはイベントが起こらない限り書き換えを行なわないようなので
思ったような処理には向いていないようですね…(Flash等を使えば別でしょうが)
直にアドレスを書きたくなかったのでデータテーブルを持ってスッキリとHTMLを書きたかったのですが、却って見づらいプログラムになる事が分かりました。
回答をいただきありがとうございました。

補足

document.writeに関しては実際の処理に必要ではなく、正しくセットされているか調べてみたかったので処理の中に組み込みました。
Document.writeを使うとHTMLソースがキャンセルされるのですか・・・。大変勉強になりました。
しかしこの場合、HTMLには移行せずにJavaScript内で「INの表示→スクリプトの実行→OUTの表示」という処理が行われており、OUTが表示されないのです。
もしスクリプト内でも処理がキャンセルされてしまうのでしたら、デバッグ用の表示なのでdocument.writeはスクリプト内から外そうと思います。
imgTbl[].srcの中にはimgData[]の値が正しくセットされている事は確認しているのですが、HTMLの処理の中でimgTbl[X].srcをXの値で読めるようにしたいのです。
HTMLを始めたばかりなのでわからない事が色々とあり、ご教授いただけると助かります。