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据option的value值快速设定初始的selected选项
Aug 13 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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中的日期加减方法示例
2014/08/21 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python运算符重载用法实例分析
2015/06/01 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
师范毕业生自荐信
2013/10/17 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
文明班级建设方案
2014/05/15 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python