Scrollable HTML table

Overview

Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table.

Scrollable HTML table code tested in IE5.0+, FF1.5+.

Source code for index.html

<!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" xml:lang="en" lang="en">
<head>
    <title>Scrollable HTML table</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>

    <style>
        table {
            text-align: left;
            font-size: 12px;
            font-family: verdana;
            background: #c0c0c0;
        }

        table thead {
            cursor: pointer;
        }

        table thead tr,
        table tfoot tr {
            background: #c0c0c0;
        }

        table tbody tr {
            background: #f0f0f0;
        }

        td, th {
            border: 1px solid white;
        }
    </style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
    <thead>
        <tr>
            <th class="c1">Name</th>
            <th class="c2">Surename</th>
            <th class="c3">Age</th>
        </tr>
    </thead>

    <tbody>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">30</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">31</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">32</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">33</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">34</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">35</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">36</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">37</th>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th class="c1">Name</th>
            <th class="c2">Surename</th>
            <th class="c3">Age</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 100);
</script>

</body>
</html>

Source code for webtoolkit.scrollabletable.js

/**
*
* Scrollable HTML table
* http://www.webtoolkit.info/
*
**/

function ScrollableTable (tableEl, tableHeight, tableWidth) {

    this.initIEengine = function () {

        this.containerEl.style.overflowY = 'auto';
        if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
            this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
        } else {
            this.containerEl.style.overflowY = 'hidden';
            this.tableEl.style.width = this.newWidth +'px';
        }

        if (this.thead) {
            var trs = this.thead.getElementsByTagName('tr');
            for (x=0; x<trs.length; x++) {
                trs[x].style.position ='relative';
                trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
            }
        }

        if (this.tfoot) {
            var trs = this.tfoot.getElementsByTagName('tr');
            for (x=0; x<trs.length; x++) {
                trs[x].style.position ='relative';
                trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
            }
        }

        ;


}

http://www.webtoolkit.info/scrollable-html-table.html

번호	제목	글쓴이	일자	조회
220	img 이미지 부드럽게 줄이기 1	GoodBug	2009-12-18	8,193
219	rss xml 파싱하는 모듈 입니다. 1	고고싱	2009-11-27	7,641
218	트리 입니다 . 1	고고싱	2009-11-27	5,873
217	에러처리 1	kaiser	2009-05-11	6,088
216	웹페이지 복사 방지 해지 하는 법	kaiser	2009-05-03	11,673
215	javascript 한글 짜르기 1 1	kaiser	2008-08-14	7,985
214	rolling 롤링 스크립트 1 2	GoodBug	2008-07-11	10,128
213	alert 메시지를 print 처럼 사용하기 2	고고싱	2008-06-10	8,675
212	onload onload 펑션이 정의되어 있는 상황에서 onload에 추가하기 1	GoodBug	2008-04-11	8,440
211	javascript 자바스크립트 개발가이드 4 1	kaiser	2008-04-09	8,898
210	escape HTML escpae code 1	GoodBug	2008-04-02	6,499
209	optgroup SELECT 목록 그룹별로 묶기 1 1	GoodBug	2008-03-06	8,215
208	동적 테이블 테이블에 동적 TR 삽입 및 삭제 IE, FF 공용 1	GoodBug	2008-01-18	11,745
207	drag Javascript drag and drop 1 1	GoodBug	2008-01-16	8,171
206	sort Sortable HTML table 2	GoodBug	2008-01-16	7,402
	scrollable table Scrollable HTML table 1	GoodBug	2008-01-16	7,087
204	CSS CSS centered layout 1 1	GoodBug	2008-01-16	6,685
203	utf8 Javascript UTF-8 1	GoodBug	2008-01-16	7,914
202	encode Javascript url decode, encode 2	GoodBug	2008-01-16	8,159
201	암호화 Javascript MD5 2	GoodBug	2008-01-15	7,364