这次给大家带来怎样用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中文网其它相关文章!
推荐阅读: