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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php查询ip所在地的方法
2014/12/05 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP goto语句用法实例
2019/08/06 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
用ADODB.Stream转换
2007/01/22 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
求职自荐信怎么写
2014/03/06 职场文书
党员政治学习材料
2014/05/14 职场文书
2016年记者节感言
2015/12/08 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技