使用jQuery+CSS如何实现table表格

来源：赴品旅游

这篇文章主要介绍了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.gxlcms.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 p
 {
 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;
 //注：多次点击后，内面文字会包裹多层p，尚无好的解决方法
 function test(){
 if(!flag){
 $('table').addClass('vertical').find('th, td').wrapInner('<p>');
 //$('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>

上面是我整理给大家的，希望今后会对大家有帮助。

使用casperjs和resemble.js如何实现像素对比（详细教程）

使用js实现推箱子小游戏（详细教程）

使用JavaScript如何实现快速排序（详细教程）

有关vue中如何实现二级联动默认选中第一个值

在AngularJS中使用ui-route实现多层嵌套路由（详细教程）