Повернуть стол на 90 градусов - PullRequest
Новая
       8

Повернуть стол на 90 градусов

2 голосов
/ 29 июня 2011

У меня есть таблица, которая выглядит примерно так: 

<table><tbody>
    <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>
    <tr><td>e</td><td>5</td></tr>
    <tr><td>f</td><td>6</td></tr>
    <tr><td>g</td><td>7</td></tr>
</tbody></table>

Мне нужно, чтобы получить что-то вроде этого: 

<table><tbody>
    <tr>
        <td>a</td><td>b</td><td>c</td><td>d</td>
        <td>e</td><td>f</td><td>g</td>
    </tr>
    <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td>
        <td>5</td><td>6</td><td>7</td>
    </tr>
</tbody></table>

пример

Я думаю, что-то вроде этого должно сработать, но я немного растерялся, как бы я поступил так Вот что я начал

Я открыт для Javascript, jQuery или даже CSS для этого.

Ответы [ 3 ]

2 голосов
/ 29 июня 2011

Это поменяет местами строки и столбцы любого размера tbody, если все строки имеют одинаковое количество ячеек. 

<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> Small Test Page</title>
</head>
<body>
<script>
function tableSwap(){
    var t= document.getElementsByTagName('tbody')[0],
    r= t.getElementsByTagName('tr'),
    cols= r.length, rows= r[0].getElementsByTagName('td').length,
    cell, next, tem, i= 0, tbod= document.createElement('tbody');

    while(i<rows){
        cell= 0;
        tem= document.createElement('tr');
        while(cell<cols){
            next= r[cell++].getElementsByTagName('td')[0];
            tem.appendChild(next);
        }
        tbod.appendChild(tem);
        ++i;
    }
    t.parentNode.replaceChild(tbod, t);
}
</script>
<h1> Small Test Page</h1>
<p> <button type= "button" id= "tableSwapBtn" onclick= "tableSwap()"> 
Swap rows and columns</button> </p>
<table style="width:300px;border:1px" rules="all">
<tbody>
<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>
<tr> <td> e</td> <td> 5</td> </tr>
<tr> <td> f</td> <td> 6</td> </tr>
<tr> <td> g</td> <td> 7</td> </tr>
</tbody>
</table>
</body>
</html>
1 голос
/ 17 июня 2016

У меня есть класс jquery, который выполняет эту задачу. Этот класс также поддерживает rowspan и colspan в таблице.

Использование действительно просто: 

$('#newtable').tableflip($('#sourcetable'));

Вот код класса и пример использования: https://jsfiddle.net/adyhu78/9b1q4ys0/

1 голос
/ 24 июня 2014

Вот мое решение: http://jsfiddle.net/mtrwk/19/

$('table').each(function() {
    $(this).after("<table><tbody></tbody></table>");
    var newTable = $(this).next("table").children("tbody");
    $(this).children("tbody").children("tr").each(function(rIndex, rItem){
        $(this).children("td").each(function(dIndex, dItem){
            if(newTable.children("tr:eq("+dIndex+")").html() == null){
                newTable.append("<tr></tr>");
            }
            newTable.children("tr:eq("+dIndex+")").append($(this)[0].outerHTML);
        });
    });
});
...