将水平html表格反转为垂直表格

Invert horizontal html table into vertical

本文关键字：表格 垂直 html 水平      更新时间：2023-09-26

我有一个无法触摸的html表，我正试图用CSS或JS（或jquery）以某种方式旋转它。基本上它是一个简单的表格，如：

<table>
<thead>
<tr><th>header1</th><th>header2</th></tr>
</thead>
<tbody>
<tr><td>content1</td><td>content2</td></tr>
<tbody>
</table>

我需要把那张桌子旋转一下，这样它就能显示

header 1 content 1
header 2 content 2

我试着用这个小提琴演奏(http://jsfiddle.net/Hskke/136/)但出于某种原因，我一直在玩的代码（从这里开始：https://stackoverflow.com/a/6297892)不起作用。你知道我想做错什么吗？

我的jsfiddle还包含原始的html代码，所以有一些额外的数据。。

我们可以做一些类似的事情

var  x = $("#walls_settings_timers").find("th,td");
var i = $("#walls_settings_timers").find("tr").length;
var j = x.length/i;
console.log(i , j);
var newT= $("<table>").appendTo("body");
for (j1=0; j1<j;j1++){
    var temp = $("<tr>").appendTo(newT);
    for(var i1=0;i1<i; i1++){
        temp.append($(x[i1*j+j1]).clone());
    }
}

在这里查看jsFiddle

相关文章：