本文實例講述了jQuery實現(xiàn)調整表格單列順序的方法。分享給大家供大家參考，具體如下：
<!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(); //文檔加載完畢時,先將表格中的數(shù)據(jù)顯示到面板中 $(".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)+")") //將每一列分別存入數(shù)組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相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
