HTML输入学生成绩并排序java_[Java教程]利用js排序html表格

js排序特效

.main{ height:auto; overflow:hidden; margin:0px auto;}

.main td{ text-align:center; height:28px; width:100px; line-height:28px ; font-size:14px; color:#555;}

.main .title td{ cursor:pointer; color:#333}

.none{ display:none}

$(function(){

var pk=1;

$(".title td").click(function(){

// 把要排序的内容添加到数组里

var tIndex=parseInt($(this).index());

var valueArray=new Array();

var p=0;

for(var i=1; i

if(tIndex!=0){

valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());

}else{

valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();

}

p++;

}

//数据排序

if(pk==1){

valueArray.sort(function(a,b){ return a

pk=2

}else{

valueArray.sort(function(a,b){ return a>b ? -1:1})

pk=1

}

//匹配内容 加入到一个隐藏的排序div里+-

for(var i=0; i

for(var d=1; d

var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();

if(valueArray[i]==valueText){

$("table tr").eq(d).clone().appendTo(".none")

}

}

}

//重新整理html 排序，添加到视图里

var titleClone=$("table tr").eq(0).clone(true);

$("table").html("").append(titleClone);

$("table").append($(".none").html())

$(".none").html("");

})

})

姓名	年龄	出生年	分数
李百(L)	15	1988	99
王易(W)	25	2000	150
林明(L)	18	1745	120
李姐(L)	20	1996	130

特效出自：kevn- web前段开发