Question

我想转换HTML表格中的行和列，即“行”为“列”，“列为行”。

我能做什么？

示例：

1 4 7  
2 5 8  
3 6 9

作为

1 2 3  
4 5 6  
7 8 9

Answer 1

http://jsfiddle.net/CsgK9/2/

HTML：

<table>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>7</td>
    </tr>
    <tr>
        <td>2</td>
        <td>5</td>
        <td>8</td>
    </tr>
    <tr>
        <td>3</td>
        <td>6</td>
        <td>9</td>
    </tr>
</table>


<p><a href="#">Do it.</a></p>

JS：

$("a").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

    return false;
});

Answer 2

David Bushell有一个CSS解决方案（使用flexbox）： http://dbushell.com/2016/03/04/css-only-responsive-tables/

还有这个CSS解决方案（使用float）

select to_char(add_months (to_date('10/18/2007','MM/DD/YYYY'), -1* Level), 'Mon-YYYY')
Month   
FROM Dual
CONNECT BY Level <= 11
order by month

http://jsfiddle.net/XKnKL/3/

（在这个答案中都提到了它们：HTML Table with vertical rows）

Answer 3

这适用于任意html：

function swap( cells, x, y ){
   if( x != y ){     
   var $cell1 = cells[y][x];
   var $cell2 = cells[x][y];
   $cell1.replaceWith( $cell2.clone() );
   $cell2.replaceWith( $cell1.clone() );
    }
}

var cells = [];
$('table').find('tr').each(function(){
    var row = [];
    $(this).find('td').each(function(){
       row.push( $(this) );    
    });
    cells.push( row );
});

for( var y = 0; y <= cells.length/2; y++ ){
    for( var x = 0; x < cells[y].length; x++ ){
        swap( cells, x, y );
    }   
}

工作小提琴：

http://jsfiddle.net/Hskke/1/

Answer 4

你想用它做什么语言？我假设JavaScript，正如你所说的jQuery。（jQuery不是一种语言，它是一种语言的库）

您需要找到一种将表格表示为数据结构的方法。为简单起见，这应该通过OOP完成。我建议你获取列数和行数，并将数据放在一个单独的平面数组中。

您还需要设计一些能够解析HTML并获取表格的内容，将其转换为您的结构，从而轻松完成计算。这可以通过jQuery的方法完成。

然后你需要找一个排序平面数组的排序函数。

最后，您需要将数组拆分为适当的列和行并重新呈现HTML。

请参阅！没那么难。设计已经为您完成，您只需要实现它。（也许我不应该为你做那么多工作..）

Answer 5

这是@svinto 的回答，添加了

支持 td 和 th（混合）
参差不齐的表格（行（和列）长度不等的表格）

http://jsfiddle.net/xsp4eqwz/2/

$("a#transposeButton").click(function(){
    $("table#transposeThis").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(rowToColIndex){
            $(this).find("td, th").each(function(colToRowIndex){
                if(newrows[colToRowIndex] === undefined) { newrows[colToRowIndex] = $("<tr></tr>"); }
                while(newrows[colToRowIndex].find("td, th").length < rowToColIndex){
                    newrows[colToRowIndex].append($("<td></td>"));
                }
                newrows[colToRowIndex].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
    
    return false;
});

td, th { padding:5px; border:1px solid #ccc;}

th { background-color: silver; font-weight: bold }

<table id="transposeThis">
    <tr>
        <th>H1</th>
        <th>H2</th>
        <th>H3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2</td>
        <td>5</td>
        <td>8</td>
    </tr>
    <tr>
        <th>H1</th>
        <th>H2</th>
        <th>H3</th>
        <th>H4</th>
    </tr>
    <tr>
        <td>3</td>
        <td>6</td>
        <td>9</td>
        <td>10</td>
    </tr>
</table>


<p><a href="#" id="transposeButton">Do it.</a></p>

Answer 6

我一直在寻找一种非jquery的方式，并提出了以下建议：

const transposeTable = (tbody, newContainerType = "tbody") => {
  const rows = Array.from(tbody.querySelectorAll("tr"))
  const newTbody = document.createElement(newContainerType)

  for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
    const row = rows[rowIdx]
    const cells = Array.from(row.querySelectorAll("td, th"))

    for (let cellIdx = 0; cellIdx < cells.length; cellIdx++ ) {
      const cell = cells[cellIdx]
      const newRow = newTbody.children[cellIdx] || document.createElement("tr")
      if (!newTbody.children[cellIdx]) {
        newTbody.appendChild(newRow)
      }
      newRow.appendChild(cell.cloneNode(true))
    }
  }
  
  // Do live DOM manipulations only once for performance
  tbody.parentElement.appendChild(newTbody)
  tbody.parentElement.removeChild(tbody)
}

transposeTable(document.querySelector("tbody"))

参考：https://jsfiddle.net/ThomasR/0b9pv1rx/43/

如何反转（转置）HTML表的行和列？

6 个答案: