这篇文章主要介绍了jQuery+CSS实现的table表格行列转置功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery+CSS实现的table表格行列转置功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
www.jb51.net 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 |
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章: