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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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内核探索:变量存储与类型使用说明
2014/01/30 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
JavaScript运算符小结
2015/06/03 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
简单实现python聊天程序
2018/04/01 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
大学毕业感言100字
2014/02/03 职场文书
幼儿教师研修感言
2014/02/12 职场文书
一年级学生期末评语
2014/04/21 职场文书
邀请函模板
2015/02/02 职场文书
大学学生个人总结
2015/02/15 职场文书
2016读书月活动心得体会
2016/01/14 职场文书