本文实例讲述了jQuery实现调整表格单列顺序的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>调整表格顺序</title>
<script type = "text/javascript" src="jquery-1.7.2.js"></script>
<style type = "text/css">
#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;
}
</style>
<script type = "text/javascript">
$(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 += "<span style = 'margin-top:10px;border:1px solid;display:block' id='"+n+"' class='sortTd'>"+$(this).text()+"</span>";
})
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 = $("<tr></tr>")
$(col).each(function(){
tr.append($($(this)[j]));
})
$("#" + faId).append(tr);
}
index = idx;
//return col;
}
}
</script>
</head>
<body>
<div id = "main">
<div id = "tabf">
<div id = "showDetail">></div>
<table id = "tab">
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<div id = "sortTab">
<div id = "tdList"></div>
<div id = "opt">
<input type = "button" value = "UP" class = "btn up"/><br/>
<input type = "button" value = "DOWN" class = "btn down"/><br/>
</div>
</div>
</div>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- MySQL索引使用说明(单列索引和多列索引)
- SQL UPDATE 更新语句用法(单列与多列)
- Android ListView实现简单列表功能
- PHP获取数组中单列值的方法
- php基础设计模式大全(注册树模式、工厂模式、单列模式)
- JavaScript实现GriwView单列全选(自写代码)
- Java的单例设计模式详解
