一个快速添加表格的滚动条问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title> 

表格控件 

</title> 



<script language="javascript" type="text/javascript"> 

function Scrollbar() {

    this.options = {

        total: 0,   //数据总数

        pos: 0,     //当前滚动位置

        itemSize: 20,  //单项尺寸

        size: 200  //控件尺寸

    };

}

Scrollbar.prototype = (function() {

    function setOptions(options) {

        for (var attr in options) {

            this.options[attr] = options[attr];

        }

        Refresh(this);

    }

    function Refresh(_this) {

        if (!_this.created) return;



        //设置控件高度

        _this.bar.style.height = _this.options.size + "px";



        //设置内容高度

        var ch = _this.options.total * _this.options.itemSize;

        _this.content.style.height = ch + "px";

    }

    //获取滚动位置

    function getPos() {

        var top = this.bar.scrollTop;

        var pos = parseInt(top / this.options.itemSize);

        return pos;

    }

    //每页可展示的数据数量

    function getPageItems() {

        return this.options.size / this.options.itemSize;

    }

    

    //滚动事件响应

    function OnScroll(_this) {

        var pos = _this.getPos();

        if (pos == _this.options.pos) return;

        _this.options.pos = pos;

        _this.onScroll(pos);

    }



    //滚动条创建

    function CreateAt(dom) {

        var _this = this;



        var bar = document.createElement("div");

        var content = document.createElement("div");

        bar.appendChild(content);



        bar.style.width = "19px";

        bar.style.overflowY = "scroll";

        bar.style.overflowX = "hidden";

        if (bar.attachEvent) {

            bar.attachEvent("onscroll", function() { OnScroll(_this); });

        }

        else {//firefox兼容

            bar.addEventListener("scroll", function() { OnScroll(_this); }, false);

        }

        content.style.backgroundColor = "white";

        content.style.width = "1px";



        this.bar = bar;

        this.content = content;



        if (typeof (dom) == "string") {

            dom = document.getElementById(dom);

        }

        dom.innerHTML = "";

        dom.appendChild(this.bar);

        this.created = true;

        Refresh(this);

    }



    return {

        setOptions: setOptions,

        CreateAt: CreateAt,

        getPos: getPos,

        getPageItems: getPageItems,

        onScroll: null  //模拟滚动条事件

    };

})();

var data = []; 

//创建一万条示例数据 

for (var i = 0; i < 10000; i++) { 

var row = { 

id: i, 

text: "text" + i 

}; 

data.push(row); 

} 

//创建滚动条 

var scrbar = new Scrollbar(); 

window.onload = function() { 

scrbar.CreateAt("divScroll"); 

scrbar.setOptions({ 

total: 10000, 

size: 300 

}); 

scrbar.onScroll = function(pos) { 

ShowData(pos); 

} 

//获取模板 

var items = scrbar.getPageItems(); 

var tpl = document.getElementById("trTpl"); 

tpl.parentNode.removeChild(tpl); 

//仅创建所看到的几十行表格，所以自然快得多 

var list = document.getElementById("tblList"); 

for (var i = 0; i < data.length && i < items; i++) { 

var nr = tpl.cloneNode(true); 

//从模板行复制新行 

list.appendChild(nr); 

} 

ShowData(scrbar.getPos()); 

} 

//根据滚动条，展示数据 

function ShowData(pos) { 

var n = scrbar.getPageItems(); 

var rows = document.getElementById("tblList").rows; 

for (var i = 0; i < n; i++) { 

var row = rows[i]; 

var item = data[i + pos]; 

row.cells["tdID"].innerHTML = item["id"]; 

row.cells["tdText"].innerHTML = item["text"]; 

} 

} 

</script> 

</head> 

<body> 

<div id="divScroll" style="float:right"> 

</div> 

<table border="1"> 

<!--行标题--> 

<thead> 

<tr> 

<th> 

ID 

</th> 

<th> 

Text 

</th> 

</tr> 

</thead> 

<!--数据展示区--> 

<tbody id="tblList"> 

<tr id="trTpl"> 

<td id="tdID"> 

</td> 

<td id="tdText"> 

</td> 

</tr> 

</tbody> 

</table> 

</body> 

</html>