php添加表格行列,怎样用jquer实现table表格行列互换

这次给大家带来怎样用jquer实现table表格行列互换，用jquer实现table表格行列互换的注意事项有哪些，下面就是实战案例，一起来看一下。

具体代码如下：

jQuery行列转置

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;

}

var flag = false;

//注：多次点击后，内面文字会包裹多层p，尚无好的解决方法

function test(){

if(!flag){

$('table').addClass('vertical').find('th, td').wrapInner('

');

//$('table').addClass('vertical');//数字会变垂直，不能用

}else{

$('table').removeClass('vertical');

}

flag=!flag;

}

列1	列2	列3	列4
数据1-1	数据1-2	数据1-3	数据1-4
数据2-1	数据2-2	数据2-3	数据2-4
数据3-1	数据3-2	数据3-3	数据3-4

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：