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

更新时间：2018年01月08日 14:02:27 作者：_大约在冬季_

这篇文章主要介绍了jQuery+CSS实现的table表格行列转置功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了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>www.jb51.net 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表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

JQuery操作与遍历元素并设置其属性、样式和内容
本文详细讲解了JQuery操作与遍历元素并设置其属性、样式和内容的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
jQuery的框架介绍
jQuery使用有一段时间了，但是有一些API的实现实在想不通。小编参考相关资料源码，现在把我的学习过程和收获分享给大家
2016-05-05
jQuery 3.0十大新特性最终版发布
jQuery 3.0在日前发布了最终的全新版本。这篇文章主要介绍了jQuery 3.0十大新特性最终版发布的相关资料,需要的朋友可以参考下
2016-07-07
jquery中使用循环下拉菜单示例代码
这个下拉菜单式可以循环的，且是使用jquery实现，很实用，大家可以学习下
2014-09-09
jquery mobile的触控点击事件会多次触发问题的解决方法
这篇文章主要介绍了jquery mobile的触控点击事件会多次触发问题的解决方法以及替代方法,需要的朋友可以参考下
2014-05-05
自定义jQuery插件方式实现强制对象重绘的方法
这篇文章主要介绍了自定义jQuery插件方式实现强制对象重绘的方法,实例分析了jQuery插件及对象重绘的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
jQuery实现简单倒计时功能的方法
这篇文章主要介绍了jQuery实现简单倒计时功能的方法,涉及jQuery根据时间动态操作页面元素的相关技巧,需要的朋友可以参考下
2016-07-07
jquery实现保存已选用户
这篇文章主要介绍了jquery实现保存已选用户,需要的朋友可以参考下
2014-07-07
jQuery插件slides实现无缝轮播图特效
Slides – 是一个简单的，容易定制和风格化，的jQuery幻灯片插件。Slides提供褪色或幻灯片过渡效果，图像淡入淡出，图像预压，自动生成分页，循环，自动播放的自定义等很多选项。用Slides插件，你可以随机播放幻灯片，设定那一套您想要开始幻灯片。
2015-04-04
jQuery的deferred对象使用详解
deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。
2016-09-09