jQuery实现调整表格单列顺序完整实例

本文实例讲述了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程序设计有所帮助。