javascriptでスクロール付きの表を生成する

○ javascriptでスクロール付きの表を生成する<

IE以外では正常に表示されません。

.	aaaa	bbbb	cccc	dddd
1	a	A	k	K
2	b	B	l	L
3	c	C	m	M
4	d	D	n	N
5	e	E	o	O
6	f	F	p	P
7	g	G	q	Q
8	h	H	r	R
9	i	I	s	S
10	j	J	t	T

下の方のボタンを押すと次のHTML文で新しいページが作成されます

getHtmlObject("top").style.width="120px";
	getHtmlObject("main").style.width=getHtmlObject("top").style.width

getHtmlObject("left").style.height="150px";
	getHtmlObject("main").style.height=getHtmlObject("left").style.height

setTimeout(
		//再描画後にコールされる
		function(){
			var wsize=getHtmlObject("main").style.width.replace(/px/, '')-getHtmlObject("main").clientWidth;
			var hsize=getHtmlObject("main").style.height.replace(/px/, '')-getHtmlObject("main").clientHeight;

getHtmlObject("top").style.width=getHtmlObject("main").style.width.replace(/px/, '')-wsize;
			getHtmlObject("left").style.height=getHtmlObject("main").style.height.replace(/px/, '')-hsize;

var main=getHtmlObject("main").getElementsByTagName("tr");
			var head=getHtmlObject("top").firstChild.childNodes[0];
			var left=getHtmlObject("left").firstChild.childNodes[0];

//要素を総て削除する
			for(i=0;i<head.firstChild.childNodes.length;i++){
				head.firstChild.removeChild(head.firstChild.firstChild);
			}
			for(i=0;i<left.length;i++){
				left.removeChild(left.firstChild);
			}

//Holizontal要素を差し込んでヘッダを作成する
			for(i=0;i<main[0].childNodes.length;i++){
				td=document.createElement("TD");
				td.innerHTML="1";
				td.firstChild.nodeValue = main[0].childNodes[i].firstChild.nodeValue;
				td.width = main[0].childNodes[i].clientWidth+5;//+5で少し隙間を空ける
				main[0].childNodes[i].width = main[0].childNodes[i].clientWidth+5;//+5で少し隙間を空ける
				main[0].childNodes[i].height = main[0].childNodes[i].clientHeight;
				head.firstChild.appendChild(td);
			}

//vartical要素を差し込んでヘッダを作成する
			for(i=1;i<main.length;i++){
				td=document.createElement("TD");
				td.innerHTML=main[i].firstChild.firstChild.nodeValue;
				tr=document.createElement("TR");
				tr.height = main[i].firstChild.clientHeight;
				main[i].firstChild.height = main[i].firstChild.clientHeight;
				tr.appendChild(td);
				left.appendChild(tr);
			}

//leftの幅をmainに合わせる
			getHtmlObject("left").style.width = main[0].firstChild.clientWidth+5;//+5で少し隙間を空ける

//サイズを固定する
			getHtmlObject("top").firstChild.style.tableLayout = "fixed";
			getHtmlObject("left").firstChild.style.tableLayout = "fixed";
			getHtmlObject("main").firstChild.style.tableLayout = "fixed";

//行を削除する
			for(i=0;i<main.length;i++){
				main[i].firstChild.style.display = "none";
			}
			getHtmlObject("top").firstChild.firstChild.firstChild.firstChild.style.display = "none";
			main[0].style.display = "none";
		}
	,0);

//スクロール
	document.getElementById("main").onscroll=function(){
		getHtmlObject("top").scrollLeft = getHtmlObject("main").scrollLeft;
		getHtmlObject("left").scrollTop = getHtmlObject("main").scrollTop;
	}

function getHtmlObject(id){
		return document.getElementById(id);
	}
</script>
</html>

▲トップページ > Visual BASIC と C#