jquery mysql表格_jQuery实现调整表格单列顺序完整实例

本文实例讲述了jQuery实现调整表格单列顺序的方法。分享给大家供大家参考，具体如下：

/p>

"http://www.w3.org/TR/html4/strict.dtd">

调整表格顺序

#main{

width:800px;

height:400px;

margin:auto;

text-align:center;

border:1px solid red;

background:#eee;

padding-top:100px;

}

#tabf{

height:170px;

position:relative;

}

#showDetail{

left:244px;

width:20px;

height:15px;

line-height:15px;

border-left:1px solid blue;

border-top:1px solid blue;

border-right:1px solid blue;

cursor:pointer;

display:none;

position:absolute;

}

#tab{

margin-top:16px;

border-collapse:collapse;

position:absolute;

}

#tab td{

height:50px;

width:50px;

line-height:50px;

border:1px solid blue;

}

#sortTab{

width:170px;

height:155px;

border:3px outset;

background:#ccc;

position:absolute;

top:15px;

left:270px;

display:none;

}

#tdList{

width:90px;

height:150px;

border:1px inset;

position:absolute;

}

#opt{

width:80px;

height:150px;

position:absolute;

left:90px;

}

.btn{

margin:10px;

width:60px;

height:20px;

}

$(function(){

index = 0;

cols = new Array();

show_Hide_tipBtn();//显示或隐藏表格设置面板

showResult(); //文档加载完毕时,先将表格中的数据显示到面板中

$(".up").click(function(){

sortColumn(cols,index,"tab","up")

showResult()

$(".sortTd").each(function(m){

if(m==index){

$(this).css("background-color","red");

}else{

$(this).css("background-color","")

}

})

})

$(".down").click(function(){

sortColumn(cols,index,"tab","down")

showResult()

$(".sortTd").each(function(m){

if(m==index){

$(this).css("background-color","red");

}else{

$(this).css("background-color","")

}

})

})

})

function getResult(cols){

var result = "";

cols.each(function(n){

result += ""+$(this).text()+"";

})

return result;

}

function showResult(){ //将表格中各列的第一行显示到面板中

cols.length = 0;

$("#tab tr:first td").each(function(i){

var col = $("#tab tr td::nth-child("+(i+1)+")") //将每一列分别存入数组cols中

cols.push(col);

$("#tdList").html(getResult($(cols))); //添加到面板

$(".sortTd").click(function(){

$(".sortTd").css("background-color","")

$(this).css("background-color","red");

index = parseInt($(this).attr("id"));

})

})

}

function show_Hide_tipBtn(){

$("#tab").mouseover(function(){ //鼠标移入到表格上时,显示弹出按钮

$("#showDetail").css("display","block");

}).mouseout(function(){ //鼠标移入到表格上时,隐藏弹出按钮

$("#showDetail").css("display","none");

})

$("#showDetail").mouseover(function(){ //鼠标移入到弹出按钮上时,显示弹出按钮

$(this).css("display","block");

}).mouseout(function(){ //鼠标移入到弹出按钮上时,隐藏弹出按钮

$(this).css("display","none");

})

$("#showDetail").click(function(){

$("#sortTab").slideToggle("slow");

})

}

function sortColumn(col, t, faId, dir){

if (((t == 0) && (dir == "up")) || ((t == col.length-1) && (dir == "down"))) {

return false;

}

else {

var k = t;

var idx = 0;

if (dir == "up") {

idx = k - 1;

}

else

if (dir == "down") {

idx = k + 1;

}

var temp = null;

temp = col[idx];

col[idx] = col[k];

col[k] = temp;

$("#" + faId + " tr").each(function(){

$(this).remove();

})

var trs = col[0].length;

for (var j = 0; j < trs; j++) {

var tr = $("

")

$(col).each(function(){

tr.append($($(this)[j]));

})

$("#" + faId).append(tr);

}

index = idx;

//return col;

}

}

>

a	b	c	d	e

希望本文所述对大家jQuery程序设计有所帮助。