Javascript 如何使用CSS将列转换为行

嗨，我需要将列转换为行，将行转换为列。左侧有列标题和行标题。行标题只是行左侧的粗体文本，用于定义行的内容

我正在努力使这张桌子便于移动。该表有7列宽，7列在智能手机中不显示。所以我的想法是使用一个媒体查询来显示一个表，其中的列和行是交换的，因为不会有超过3行。可以这样做吗？

Css解决方案：只需将您的

td

和

th

转换为

显示：块&您的
tr
到
显示：表格单元格

CSS:

缺点：如果单元格中的数据太多，布局将中断

jQuery解决方案：我们可以跟踪元素高度以保持不变

JS:

$（函数（）{
switchRowsAndCols（“表”，767）；
});
功能开关行和列（此表，分辨率）{
if（$（窗口）.width（）<分辨率）{
SwitchRow和ColSinnerFun（此表）；
}
$（窗口）。调整大小（函数（）{
if（$（窗口）.width（）<分辨率）{
SwitchRow和ColSinnerFun（此表）；
}否则{
开关行和列移动（此表）；
}
});
};
功能开关行和列删除（此表）{
$（“tr>*”，此表）.css({
高度：“自动”
});
};
功能开关Row和ColsInnerFun（此表）{
var maxRow=$（“tr:first-child（）>*”，此表）；
对于（变量i=maxRow；i>=0；i--）{
$（“tr>*：第n个子项（“+i+”），此表）.css({
高度：“自动”
});
var maxHeight=0；
$（“tr>*：第n个子（“+i+”），此表）。每个（函数（）{
var h=$（this.height（）；
maxHeight=h>maxHeight？h:maxHeight；
});
$（“tr>*：第n个子（“+i+”），此表）。每个（函数（）{
$（此）.height（最大高度）；
});
};
};
好吧，我想我会为其他寻求额外帮助的人提供一个稍微不同的
jQuery
解决方案

如果必须使用脚本，不妨让它执行所有操作（以下脚本需要
4.2ms
才能运行，这在我看来非常合理：-）

基本上，下面所做的是获取
表格数据
，并将其转换为
多维数组

1, 2, 3, 4
5, 6, 7, 8 
9, 10, 11, 12

变成：

[[1,5,9],[2,6,10],[3,7,11],[4,8,12]]

<input type="button" id="switch" value="switch" \>
<table id="switchItems">
<tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
</tr>
<tr>
    <td>...etc

$(function(){
    $('#switch').on('click', function(){
        var items = [];
        var itemsConv = [];
        var table = $('#switchItems');
        var row,cell;

// FIND ALL OF THE DATA
        $("tr").each(function(){
            var trRow = [];
            $(this).children().each(function() {
                trRow.push($(this).text());
            });
            items.push(trRow);
        });
        for(var j=0;j<items[0].length;j++){
            var newRow = [];
            for(var i=0;i<items.length;i++){
                newRow.push(items[i][j]);
            }
            itemsConv.push(newRow);
        }

// KILL OUR CURRENT DATA IN THE TABLE
        table.empty();

// REWRITE OUR TABLE WITH NEW DATA
        for(var i=0; i<itemsConv.length; i++){
            row = $( '<tr />' );
            table.append( row );
            for(var j=0; j<itemsConv[i].length; j++){
                cell = $('<td>'+itemsConv[i][j]+'</td>');
                row.append( cell );
            }
        }
    });
});

然后，只需让它基于新的
数组
重写
表
，并使用一对
for循环

需要注意的一点是，您必须将其绑定到
媒体查询
或
窗口。调整处理程序的大小
以获得所需的影响。这与更改上的
一样简单。单击我分配的
处理程序。

看一看！非常漂亮：

[[1,5,9],[2,6,10],[3,7,11],[4,8,12]]

<input type="button" id="switch" value="switch" \>
<table id="switchItems">
<tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
</tr>
<tr>
    <td>...etc

$(function(){
    $('#switch').on('click', function(){
        var items = [];
        var itemsConv = [];
        var table = $('#switchItems');
        var row,cell;

// FIND ALL OF THE DATA
        $("tr").each(function(){
            var trRow = [];
            $(this).children().each(function() {
                trRow.push($(this).text());
            });
            items.push(trRow);
        });
        for(var j=0;j<items[0].length;j++){
            var newRow = [];
            for(var i=0;i<items.length;i++){
                newRow.push(items[i][j]);
            }
            itemsConv.push(newRow);
        }

// KILL OUR CURRENT DATA IN THE TABLE
        table.empty();

// REWRITE OUR TABLE WITH NEW DATA
        for(var i=0; i<itemsConv.length; i++){
            row = $( '<tr />' );
            table.append( row );
            for(var j=0; j<itemsConv[i].length; j++){
                cell = $('<td>'+itemsConv[i][j]+'</td>');
                row.append( cell );
            }
        }
    });
});

HTML:

[[1,5,9],[2,6,10],[3,7,11],[4,8,12]]

<input type="button" id="switch" value="switch" \>
<table id="switchItems">
<tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
</tr>
<tr>
    <td>...etc

$(function(){
    $('#switch').on('click', function(){
        var items = [];
        var itemsConv = [];
        var table = $('#switchItems');
        var row,cell;

// FIND ALL OF THE DATA
        $("tr").each(function(){
            var trRow = [];
            $(this).children().each(function() {
                trRow.push($(this).text());
            });
            items.push(trRow);
        });
        for(var j=0;j<items[0].length;j++){
            var newRow = [];
            for(var i=0;i<items.length;i++){
                newRow.push(items[i][j]);
            }
            itemsConv.push(newRow);
        }

// KILL OUR CURRENT DATA IN THE TABLE
        table.empty();

// REWRITE OUR TABLE WITH NEW DATA
        for(var i=0; i<itemsConv.length; i++){
            row = $( '<tr />' );
            table.append( row );
            for(var j=0; j<itemsConv[i].length; j++){
                cell = $('<td>'+itemsConv[i][j]+'</td>');
                row.append( cell );
            }
        }
    });
});


A.
B
C
D
等

jQuery脚本：

[[1,5,9],[2,6,10],[3,7,11],[4,8,12]]

<input type="button" id="switch" value="switch" \>
<table id="switchItems">
<tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
</tr>
<tr>
    <td>...etc

$(function(){
    $('#switch').on('click', function(){
        var items = [];
        var itemsConv = [];
        var table = $('#switchItems');
        var row,cell;

// FIND ALL OF THE DATA
        $("tr").each(function(){
            var trRow = [];
            $(this).children().each(function() {
                trRow.push($(this).text());
            });
            items.push(trRow);
        });
        for(var j=0;j<items[0].length;j++){
            var newRow = [];
            for(var i=0;i<items.length;i++){
                newRow.push(items[i][j]);
            }
            itemsConv.push(newRow);
        }

// KILL OUR CURRENT DATA IN THE TABLE
        table.empty();

// REWRITE OUR TABLE WITH NEW DATA
        for(var i=0; i<itemsConv.length; i++){
            row = $( '<tr />' );
            table.append( row );
            for(var j=0; j<itemsConv[i].length; j++){
                cell = $('<td>'+itemsConv[i][j]+'</td>');
                row.append( cell );
            }
        }
    });
});

$（函数（）{
$（“#开关”）。打开（'click'，function（）{
var项目=[]；
var itemsConv=[]；
变量表=$（“#开关项”）；
var行、单元格；
//查找所有数据
$（“tr”）。每个（函数（）{
var trRow=[]；
$（this）.children（）.each（function（））{
trRow.push（$（this.text（））；
});
项目推送（trRow）；
});
对于（var j=0；jc你能把你的表分开吗？它有多少行？@NicholasHazel这个简单的解决方案有一个问题——如果你放了太多的数据，例如换行符，布局崩溃了&我想不出任何css解决方案，所以这里有一些jQuery——请看我更新的答案。@ImranBughio-决定扔掉一个超级快速严格的jQuery解决方案。如果你是要想使用jQuery，请好好使用它：-）（您的答案也非常合理）很好，我只是在网上看了看，有很多小脚本都做同样的任务，但是没有任何合适的注册jQuery插件，也许我们应该自己上传一个插件？当然，想使用git吗？让我们在中继续讨论