又一个非常酷的可以排序的表格，本范例对表头进行了美化处理，只需要简单的调用即可
查看演示页面 View Demo 查看全部代码 View Code
以下代码放到<head>区
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
}
p{
margin-bottom:0px;
font-weight:bold;
}
/* Start layout CSS */
.tableWidget_headerCell,.tableWigdet_headerCellOver,.tableWigdet_headerCellDown{ /* General rules for both standard column header and mouse on header of sortable columns */
cursor:pointer;
border-bottom:3px solid #C5C2B2;
border-right:1px solid #ACA899;
border-left:1px solid #FFF;
background-color: #ECE9D8;
}
.tableWidget_headerCell{ /* Standard column header */
border-top:2px solid #ECE9D8;
}
.tableWigdet_headerCellOver{ /* Rollover on sortable column header */
border-top:2px solid #FFC83C;
}
.tableWidget tbody .tableWidget_dataRollOver{ /* Rollover style on mouse over (Data) */
background-color:#FFF; /* No mouseover color in this example - specify another color if you want this */
}
.tableWigdet_headerCellDown{
border-top:2px solid #FFC83C;
background-color:#DBD8C5;
border-left:1px solid #ACA899;
border-right:1px solid #FFF;
}
.tableWidget td{
margin:0px;
padding:2px;
border-bottom:1px solid #EAE9E1; /* Border bottom of table data cells */
}
.tableWidget tbody{
background-color:#FFF;
}
.tableWidget{
font-family:arial;
font-size:12px;
width:400px;
}
/* End layout CSS */
div.widget_tableDiv {
border:1px solid #ACA899; /* Border around entire widget */
height: 200px;
overflow:auto;
overflow-y:auto;
overflow:-moz-scrollbars-vertical;
width:400px;
}
html>body div.widget_tableDiv {
overflow: hidden;
width:400px;
}
.tableWidget thead{
position:relative;
}
.tableWidget thead tr{
position:relative;
top:0px;
bottom:0px;
}
.tableWidget .scrollingContent{
overflow-y:auto;
overflow:-moz-scrollbars-vertical;
width:100%;
}
</style>
<script type="text/javascript">
/*
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
*/
var tableWidget_tableCounter = 0;
var tableWidget_arraySort = new Array();
var tableWidget_okToSort = true;
var activeColumn = new Array();
var arrowImagePath = "images/"; // Path to arrow images
function addEndCol(obj)
{
if(document.all)return;
var rows = obj.getElementsByTagName('TR');
for(var no=0;no<rows.length;no++){
var cell = rows[no].insertCell(-1);
cell.innerHTML = ' ';
cell.style.width = '13px';
cell.width = '13';
}
}
function highlightTableHeader()
{
this.className='tableWigdet_headerCellOver';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode.parentNode;
this.parentNode.style.top = divObj.scrollTop + 'px';
}
}
function deHighlightTableHeader()
{
this.className='tableWidget_headerCell';
}
function mousedownTableHeader()
{
this.className='tableWigdet_headerCellDown';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode.parentNode;
this.parentNode.style.top = divObj.scrollTop + 'px';
}
}
function sortNumeric(a,b){
a = a.replace(/,/,'.');
b = b.replace(/,/,'.');
a = a.replace(/[^\d\-\.\/]/g,'');
b = b.replace(/[^\d\-\.\/]/g,'');
if(a.indexOf('/')>=0)a = eval(a);
if(b.indexOf('/')>=0)b = eval(b);
return a/1 - b/1;
}
function sortString(a, b) {
if ( a.toUpperCase() < b.toUpperCase() ) return -1;
if ( a.toUpperCase() > b.toUpperCase() ) return 1;
return 0;
}
function cancelTableWidgetEvent()
{
return false;
}
function sortTable()
{
if(!tableWidget_okToSort)return;
tableWidget_okToSort = false;
/* Getting index of current column */
var obj = this;
var indexThis = 0;
while(obj.previousSibling){
obj = obj.previousSibling;
if(obj.tagName=='TD')indexThis++;
}
var images = this.getElementsByTagName('IMG');
if(this.getAttribute('direction') || this.direction){
direction = this.getAttribute('direction');
if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
if(direction=='ascending'){
direction = 'descending';
this.setAttribute('direction','descending');
this.direction = 'descending';
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
if(direction=='descending'){
images[0].style.display='inline';
images[0].style.visibility='visible';
images[1].style.display='none';
}else{
images[1].style.display='inline';
images[1].style.visibility='visible';
images[0].style.display='none';
}
var tableObj = this.parentNode.parentNode.parentNode;
var tBody = tableObj.getElementsByTagName('TBODY')[0];
var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
images[0].style.display='none';
images[1].style.display='inline';
images[1].style.visibility = 'hidden';
if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
}
activeColumn[widgetIndex] = this;
var cellArray = new Array();
var cellObjArray = new Array();
for(var no=1;no<tableObj.rows.length;no++){
var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
cellArray.push(content);
cellObjArray.push(tableObj.rows[no].cells[indexThis]);
}
if(sortMethod=='N'){
cellArray = cellArray.sort(sortNumeric);
}else{
cellArray = cellArray.sort(sortString);
}
if(direction=='descending'){
for(var no=cellArray.length;no>=0;no--){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}else{
for(var no=0;no<cellArray.length;no++){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}
for(var no2=0;no2<cellObjArray.length;no2++){
cellObjArray[no2].removeAttribute('allreadySorted');
}
tableWidget_okToSort = true;
}
function initTableWidget(objId,width,height,sortArray)
{
width = width + '';
height = height + '';
var obj = document.getElementById(objId);
obj.parentNode.className='widget_tableDiv';
if(navigator.userAgent.indexOf('MSIE')>=0){
obj.parentNode.style.overflowY = 'auto';
}
tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
if(width.indexOf('%')>=0){
obj.style.width = width;
obj.parentNode.style.width = width;
}else{
obj.style.width = width + 'px';
obj.parentNode.style.width = width + 'px';
}
if(height.indexOf('%')>=0){
//obj.style.height = height;
obj.parentNode.style.height = height;
}else{
//obj.style.height = height + 'px';
obj.parentNode.style.height = height + 'px';
}
obj.id = 'tableWidget' + tableWidget_tableCounter;
addEndCol(obj);
obj.cellSpacing = 0;
obj.cellPadding = 0;
obj.className='tableWidget';
var tHead = obj.getElementsByTagName('THEAD')[0];
var cells = tHead.getElementsByTagName('TD');
for(var no=0;no<cells.length;no++){
cells[no].className = 'tableWidget_headerCell';
cells[no].onselectstart = cancelTableWidgetEvent;
if(no==cells.length-1){
cells[no].style.borderRight = '0px';
}
if(sortArray[no]){
cells[no].onmouseover = highlightTableHeader;
cells[no].onmouseout = deHighlightTableHeader;
cells[no].onmousedown = mousedownTableHeader;
cells[no].onmouseup = highlightTableHeader;
cells[no].onclick = sortTable;
var img = document.createElement('IMG');
img.src = arrowImagePath + 'arrow_up.gif';
cells[no].appendChild(img);
img.style.visibility = 'hidden';
var img = document.createElement('IMG');
img.src = arrowImagePath + 'arrow_down.gif';
cells[no].appendChild(img);
img.style.display = 'none';
}else{
cells[no].style.cursor = 'default';
}
}
var tBody = obj.getElementsByTagName('TBODY')[0];
if(document.all && navigator.userAgent.indexOf('Opera')<0){
tBody.className='scrollingContent';
tBody.style.display='block';
}else{
tBody.className='scrollingContent';
if(tBody.offsetHeight>(tBody.parentNode.parentNode.offsetHeight - 50)) {
tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + 'px';
}else{
tBody.style.overflow='hidden';
}
if(navigator.userAgent.indexOf('Opera')>=0){
obj.parentNode.style.overflow = 'auto';
}
}
for(var no=1;no<obj.rows.length;no++){
obj.rows[no].onmouseover = highlightDataRow;
obj.rows[no].onmouseout = deHighlightDataRow;
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
if(sortArray[no2] && sortArray[no2]=='N')obj.rows[no].cells[no2].style.textAlign='right';
}
}
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
}
tableWidget_tableCounter++;
}
function highlightDataRow()
{
if(navigator.userAgent.indexOf('Opera')>=0)return;
this.className='tableWidget_dataRollOver';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode;
var tHead = divObj.getElementsByTagName('TR')[0];
tHead.style.top = divObj.scrollTop + 'px';
}
}
function deHighlightDataRow()
{
if(navigator.userAgent.indexOf('Opera')>=0)return;
this.className=null;
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode;
var tHead = divObj.getElementsByTagName('TR')[0];
tHead.style.top = divObj.scrollTop + 'px';
}
}
</script>
将以下代码放置到<body>区
<div class="widget_tableDiv">
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody class="scrollingContent">
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
initTableWidget('myTable',500,250,Array('S','N',false,'N','S'));
</script>
下载图片
表头用到了两个箭头图片，请保存到“images”文件夹
使用方法
在<body>区使用纯HTML代码创建一个Table，注意一下几点
定义一个根Div，如: <div class="widget_tableDiv">
表格的表头使用 <THEAD> 标签包围
使用<TD> 而不是 <TH> 最为表头的内容标签
使用 <TBODY> 标签作为表行的包围标签.
最后调用initTableWidget()函数用来转换表格. Example:
<script type="text/javascript">
initTableWidget('myTable',500,250,Array('S','N',false,'N','S'));
</script>
函数参数说明如下：
'myTable' = 表格ID. 如: <TABLE id="myTable" ...
500 = 表格宽度
250 = 表格高度
Array('S','N','S','N','S') = 确定列如何排序. "S" = 字符串, "N" = 数字. 如果不排序的字段，填写false(不带引号)
