快捷搜索:

javascript table排序 这个更简单了,不用改变现在的

JavaScript实现可自定义排序的表格 -

BODY {

FONT-SIZE: 0.8em; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif

}

P {

FONT-WEIGHT: bold; MARGIN-BOTTOM: 0px

}

.tableWidget_headerCell {

BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8

}

.tableWigdet_headerCellOver {

BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8

}

.tableWigdet_headerCellDown {

BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8

}

.tableWidget_headerCell {

BORDER-TOP: #ece9d8 2px solid

}

.tableWigdet_headerCellOver {

BORDER-TOP: #ffc83c 2px solid

}

.tableWidget TBODY .tableWidget_dataRollOver {

BACKGROUND-COLOR: #fff

}

.tableWigdet_headerCellDown {

BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #ffc83c 2px solid; BORDER-LEFT: #aca899 1px solid; BACKGROUND-COLOR: #dbd8c5

}

.tableWidget TD {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: #eae9e1 1px solid

}

.tableWidget TBODY {

BACKGROUND-COLOR: #fff

}

.tableWidget {

FONT-SIZE: 12px; WIDTH: 400px; FONT-FAMILY: arial

}

DIV.widget_tableDiv {

BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; OVERFLOW-Y: auto; BORDER-LEFT: #aca899 1px solid; WIDTH: 400px; BORDER-BOTTOM: #aca899 1px solid; HEIGHT: 200px

}

HTML > BODY DIV.widget_tableDiv {

OVERFLOW: hidden; WIDTH: 400px

}

.tableWidget THEAD {

POSITION: relative

}

.tableWidget THEAD TR {

BOTTOM: 0px; POSITION: relative; TOP: 0px

}

.tableWidget .scrollingContent {

OVERFLOW-Y: auto; WIDTH: 100%

}

/*

(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=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;

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=0;no--){

for(var no2=0;no2=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(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=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';

}

}

Name

Age

Position

Income

Gender

John

37

Managing director

90.000

Male

Susan

34

Partner

90.000

Female

David

29

Head of production

70.000

Male

Laura

29

Head of marketing

70.000

Female

Kate

18

Marketing

50.000

Female

Mona

21

Marketing

53.000

Female

Mike

21

Marketing

53.000

Male

Mark

25

Production

52.000

Male

Peter

33

Production

55.000

Male

Jennifer

24

Production

49.000

Female

David

25

Photography

51.000

Male

Anna

42

Head of photography

56.000

Female

Rita

30

Photography

54.000

Female

Magnus

25

Freelancer

65.000

Male

Johnny

29

Freelancer

63.000

Male

您可能还会对下面的文章感兴趣: