Scrollable HTML table

最新推荐文章于 2025-03-13 10:13:35 发布

原创最新推荐文章于 2025-03-13 10:13:35 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JavaScript #Opera #XHTML #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript将普通HTML表格转换为可滚动表格的方法。通过简单的设置即可实现表格头部和尾部固定显示，适用于IE5.0+及Firefox1.5+浏览器。

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

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'");
			}
		}
 
		eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
	};
 
 
	this.initFFengine = function () {
		this.containerEl.style.overflow = 'hidden';
		this.tableEl.style.width = this.newWidth + 'px';
 
		var headHeight = (this.thead) ? this.thead.clientHeight : 0;
		var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
		var bodyHeight = this.tbody.clientHeight;
		var trs = this.tbody.getElementsByTagName('tr');
		if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
			this.tbody.style.overflow = '-moz-scrollbars-vertical';
			for (x=0; x<trs.length; x++) {
				var tds = trs[x].getElementsByTagName('td');
				tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
			}
		} else {
			this.tbody.style.overflow = '-moz-scrollbars-none';
		}
 
		var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
		this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
 
	};
 
	this.tableEl = tableEl;
	this.scrollWidth = 16;
 
	this.originalHeight = this.tableEl.clientHeight;
	this.originalWidth = this.tableEl.clientWidth;
 
	this.newHeight = parseInt(tableHeight);
	this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;
 
	this.tableEl.style.height = 'auto';
	this.tableEl.removeAttribute('height');
 
	this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
	this.containerEl.appendChild(this.tableEl);
	this.containerEl.style.height = this.newHeight + 'px';
	this.containerEl.style.width = this.newWidth + 'px';
 
 
	var thead = this.tableEl.getElementsByTagName('thead');
	this.thead = (thead[0]) ? thead[0] : null;
 
	var tfoot = this.tableEl.getElementsByTagName('tfoot');
	this.tfoot = (tfoot[0]) ? tfoot[0] : null;
 
	var tbody = this.tableEl.getElementsByTagName('tbody');
	this.tbody = (tbody[0]) ? tbody[0] : null;
 
	if (!this.tbody) return;
 
	if (document.all && document.getElementById && !window.opera) this.initIEengine();
	if (!document.all && document.getElementById && !window.opera) this.initFFengine();
 
 
}