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


Posted in Javascript onJune 20, 2016

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

Javascript 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
JS作为值的函数用法示例
Jun 20 #Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 #Javascript
JS事件添加和移出的兼容写法示例
Jun 20 #Javascript
Javascript操作表单实例讲解(下)
Jun 20 #Javascript
jQuery获取多种input值的简单实现方法
Jun 20 #Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 #Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
You might like
PHP新手上路(三)
2006/10/09 PHP
PHP 字符串 小常识
2009/06/05 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
javascript实现密码验证
2015/11/10 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python中的ctime()方法使用教程
2015/05/22 Python
python之Character string(实例讲解)
2017/09/25 Python
python自动化之Ansible的安装教程
2019/06/13 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
任课老师推荐信范文
2013/11/24 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA