欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-10 23:19:21
本文实例讲述了jquery+css实现的table表格行列转置功能。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下:

本文实例讲述了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>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程序设计有所帮助。