将TD列转换为TR行 [英] Convert TD columns into TR rows

问题描述

有一个快速的方式来转换（使用CSS或JavaScript）到TD，目前我有：

  ABCD 
 1 2 3 4 
  

我想翻译成：

  A 1 
 B 2 
 C 3 
 D 4 
  
 
 
 
 
解决方案
布置如下：
 < tr>< td> A< / td>< td> B< / td> < td> C< / td>< td> D< / td>< / tr> 
< tr>< td> 1< / td>< td> 2< / td>< td> 3< / td>< td> 4< / td>< / tr> 
  
进入：
 < tr>< td> A< / td>< td> 1< / td>< / tr> 
< tr>< td> B< / td>< td> 2< / td>< / tr> 
< tr>< td> C< / td>< td> 3< / td>< / tr> 
< tr>< td> D< / td>< td> 4< / td>< / tr> 
  
正确？
 
 
 
使用Javascript，但是，很难建议一个方法，知道更多关于您的网站/ HTML文件的结构。 
 
 
 
假设您的< table> 标签带有一个ID ：< table id =myTable> 您可以使用javascript以这种方式访问​​：
  var myTable = document.getElementById（'myTable'）; 
  
创建如下所示的新表：
  var newTable = document.createElement（'table'）; 
  
现在您需要将旧表行转置为新的表列：
  var maxColumns = 0; 
 //找到最大列数
 for（var r = 0; r< myTable.rows.length; r ++） {
 if（myTable.rows [r] .cells.length> maxColumns）{
 maxColumns = myTable.rows [r] .cells.length; 
} 
} 
 
 
 for（var c = 0; c  newTable.insertRow（c）; 
 for（var r = 0; r< ; myTable.rows.length; r ++）{
 if（myTable.rows [r] .length <= c）{
 newTable.rows [c] .insertCell（r）; 
 newTable.rows [c] .cells [r] =' - '; 
} 
 else {
 newTable.rows [c] .insertCell（r）; 
 newTable.rows [c] .cells [r] = myTable.rows [r] .cells [c] .innerHTML; 
} 
} 
} 
  
需要。预警：未测试。将此JavaScript代码编写到HTML页面作为练习留给读者。如果任何人发现任何错误，我错过了，我会满意，如果你指出他们对我或只是编辑修复：）
 
Is there a quick way to translate (using CSS or Javascript) a tables TD into TR, currently I have:
A B C D
1 2 3 4
and I want to translate to:
A 1
B 2
C 3
D 4
??
解决方案
You want to turn HTML arranged like this:
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
Into this: 
<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td>3</td></tr>
<tr><td>D</td><td>4</td></tr>
Correct?

You can do this with Javascript, however, it is difficult to suggest a method with out knowing more about the structure of your site/HTML files. I'll give it a go.

Assuming your <table> tag comes with an id (like this: <table id="myTable"> you can access it in javascript like this:
var myTable = document.getElementById('myTable');
You can create a new table like this:
var newTable = document.createElement('table');
Now you need to transpose the old tables rows into the new tables columns:
var maxColumns = 0;
// Find the max number of columns
for(var r = 0; r < myTable.rows.length; r++) {
    if(myTable.rows[r].cells.length > maxColumns) {
        maxColumns = myTable.rows[r].cells.length;
    }
}


for(var c = 0; c < maxColumns; c++) {
    newTable.insertRow(c);
    for(var r = 0; r < myTable.rows.length; r++) {
        if(myTable.rows[r].length <= c) {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = '-';
        }
        else {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML;
        }
    }
}
This ought to do what you need.  Be forewarned: not tested.  Working this javascript code into an HTML page is left as an exercise for the reader.  If anyone spots any errors that I missed, I be gratified if you point them out to me or simply edit to fix :)

                        
这篇关于将TD列转换为TR行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！