jQuery实现调整表格单列顺序完整实例
本文实例讲述了jQuery实现调整表格单列顺序的方法。分享给大家供大家参考，具体如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>调整表格顺序</title>
<scripttype="text/javascript"src="jquery-1.7.2.js"></script>
<styletype="text/css">
#main{
width:800px;
height:400px;
margin:auto;
text-align:center;
border:1pxsolidred;
background:#eee;
padding-top:100px;
}
#tabf{
height:170px;
position:relative;
}
#showDetail{
left:244px;
width:20px;
height:15px;
line-height:15px;
border-left:1pxsolidblue;
border-top:1pxsolidblue;
border-right:1pxsolidblue;
cursor:pointer;
display:none;
position:absolute;
}
#tab{
margin-top:16px;
border-collapse:collapse;
position:absolute;
}
#tabtd{
height:50px;
width:50px;
line-height:50px;
border:1pxsolidblue;
}
#sortTab{
width:170px;
height:155px;
border:3pxoutset;
background:#ccc;
position:absolute;
top:15px;
left:270px;
display:none;
}
#tdList{
width:90px;
height:150px;
border:1pxinset;
position:absolute;
}
#opt{
width:80px;
height:150px;
position:absolute;
left:90px;
}
.btn{
margin:10px;
width:60px;
height:20px;
}
</style>
<scripttype="text/javascript">
$(function(){
index=0;
cols=newArray();
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","")
}
})
})
})
functiongetResult(cols){
varresult="";
cols.each(function(n){
result+="<spanstyle='margin-top:10px;border:1pxsolid;display:block'id='"+n+"'class='sortTd'>"+$(this).text()+"</span>";
})
returnresult;
}
functionshowResult(){//将表格中各列的第一行显示到面板中
cols.length=0;
$("#tabtr:firsttd").each(function(i){
varcol=$("#tabtrtd::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"));
})
})
}
functionshow_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");
})
}
functionsortColumn(col,t,faId,dir){
if(((t==0)&&(dir=="up"))||((t==col.length-1)&&(dir=="down"))){
returnfalse;
}
else{
vark=t;
varidx=0;
if(dir=="up"){
idx=k-1;
}
else
if(dir=="down"){
idx=k+1;
}
vartemp=null;
temp=col[idx];
col[idx]=col[k];
col[k]=temp;
$("#"+faId+"tr").each(function(){
$(this).remove();
})
vartrs=col[0].length;
for(varj=0;j<trs;j++){
vartr=$("<tr></tr>")
$(col).each(function(){
tr.append($($(this)[j]));
})
$("#"+faId).append(tr);
}
index=idx;
//returncol;
}
}
</script>
</head>
<body>
<divid="main">
<divid="tabf">
<divid="showDetail">></div>
<tableid="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>
<divid="sortTab">
<divid="tdList"></div>
<divid="opt">
<inputtype="button"value="UP"class="btnup"/><br/>
<inputtype="button"value="DOWN"class="btndown"/><br/>
</div>
</div>
</div>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。