介绍 & lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt;才能title> www.jb51.net jQuery行列转置& lt;/title>
& lt;才能script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" jquery-1.7.2.min.js ">
<风格type=" text/css ">
表格
{
边界:1 px固体# ccc;
字体大小:14 px;
}
表th
{
背景:橙色;
颜色:# fff;
填充:10 px;
}
表道明
{
填充:10 px;
}
table.vertical
{
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
写入方式:vertical-lr;
}
表格垂直th,表。垂直td
{
宽度:100 px;
高度:14 px;
}
表格垂直div
{
宽度:100 px;
-webkit-writing-mode: horizontal-tb;
-moz-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
写入方式:horizontal-tb;
}>
var=false标记;//注:多次点击后,内面文字会包裹多层div,尚无好的解决方法
功能测试(){
如果(国旗){
$(“表”).addClass(垂直的)。找到(th, td) .wrapInner (“
这篇文章主要介绍了jQuery + CSS如何实现的表表格行列转置功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
具体如下:
先来看看运行效果:
具体代码如下:
”);//$(“表”).addClass(垂直的);//数字会变垂直,不能用
其他}{
$(“表”).removeClass(垂直的);
}
国旗=!国旗;
}> 头
身体<>
<表>
列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道明>