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

2019-11-19 14:33:58

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：nodejs使用http模块发送get与post请求的方法示例

下一篇：简易Vue评论框架的实现(父组件的实现)