首頁 > 開發者 > JavaScript

jQuery實現調整表格單列順序完整執行個體，jquery單列

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery實現調整表格單列順序完整執行個體，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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More