jQuery+CSS实现的table表格行列转置功能示例


Posted in jQuery onJanuary 08, 2018

本文实例讲述了jQuery+CSS实现的table表格行列转置功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

jQuery+CSS实现的table表格行列转置功能示例

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>3water.com jQuery行列转置</title>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <style type="text/css">
    table
    {
      border: 1px solid #ccc;
      font-size: 14px;
    }
    table th
    {
      background: orange;
      color: #fff;
      padding: 10px;
    }
    table td
    {
      padding: 10px;
    }
    table.vertical
    {
      -webkit-writing-mode: vertical-lr;
      -moz-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
    }
    table.vertical th, table.vertical td
    {
      width: 100px;
      height: 14px;
    }
    table.vertical div
    {
      width: 100px;
      -webkit-writing-mode: horizontal-tb;
      -moz-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
    }
  </style>
  <script type="text/javascript">
    var flag = false;
    //注:多次点击后,内面文字会包裹多层div,尚无好的解决方法
    function test(){
      if(!flag){
        $('table').addClass('vertical').find('th, td').wrapInner('<div>');
        //$('table').addClass('vertical');//数字会变垂直,不能用
      }else{
        $('table').removeClass('vertical');
      }
      flag=!flag;
    }
  </script>
</head>
<body>
  <table>
   <tr>
   <th>列1</th>
   <th>列2</th>
   <th>列3</th>
   <th>列4</th>
   </tr>
   <tr>
   <td>数据1-1</td>
   <td>数据1-2</td>
   <td>数据1-3</td>
   <td>数据1-4</td>
   </tr>
   <tr>
   <td>数据2-1</td>
   <td>数据2-2</td>
   <td>数据2-3</td>
   <td>数据2-4</td>
   </tr>
   <tr>
   <td>数据3-1</td>
   <td>数据3-2</td>
   <td>数据3-3</td>
   <td>数据3-4</td>
   </tr>
  </table>
  <input type="button" onclick="test()" value="行列转置" />
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
jQuery中库的引用方法
Jan 06 #jQuery
jQuery封装animate.css的实例
Jan 04 #jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
基于jquery.page.js实现分页效果
Jan 01 #jQuery
You might like
php中的时间处理
2006/10/09 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript高级学习笔记整理
2011/08/14 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
家电创业计划书
2019/08/05 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL