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

How to convert columns to rows using CSS

提问by Luke101

Hi I need to convert columns to rows and rows to columns. I have both column headers and rows headers to the left. The row headers are just bold text to the left of the row to define what the row is.

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

I am trying to make this table mobile friendly. The table is 7 columns wide and the 7 columns do not show in a smart phone. So my idea is to use a media query to display a table where the columns and rows are switched since there will be no more than 3 rows. Can this be done?

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

回答by Imran Bughio

DEMO

演示

Css Solution:Simply turn your td& thto display:block;& your trto display:table-cell;

CSS 解决方案：只需将您的td&th转至display:block;& 您的tr至display:table-cell;

CSS:

CSS：

@media screen and (max-width:767px) {
    table tr > *{
        display: block;
    }
    table tr {
        display: table-cell;
    }
}

Drawback:If your cells have too much data the layout will break Example.

缺点：如果您的单元格有太多数据，布局将破坏Example。

jQuery Solution:We can keep track of element height to stay the same DEMO

jQuery 解决方案：我们可以跟踪元素高度以保持相同DEMO

JS:

JS：

$(function () {
    switchRowsAndCols("table", 767);
});

function switchRowsAndCols(thisTable, resolution) {
    if ($(window).width() < resolution) {
        switchRowsAndColsInnerFun(thisTable);
    }
    $(window).resize(function () {
        if ($(window).width() < resolution) {
            switchRowsAndColsInnerFun(thisTable);
        }else{
            switchRowsAndColsRemove(thisTable);
        }
    });
};

function switchRowsAndColsRemove(thisTable) {
    $("tr > *", thisTable).css({
        height: 'auto'
    });
};

function switchRowsAndColsInnerFun(thisTable) {
    var maxRow = $("tr:first-child() > *", thisTable).length;

    for (var i = maxRow; i >= 0; i--) {

        $("tr > *:nth-child(" + i + ")", thisTable).css({
            height: 'auto'
        });

        var maxHeight = 0;

        $("tr > *:nth-child(" + i + ")", thisTable).each(function () {
            var h = $(this).height();
            maxHeight = h > maxHeight ? h : maxHeight;
        });

        $("tr > *:nth-child(" + i + ")", thisTable).each(function () {
            $(this).height(maxHeight);
        });
    };
};

回答by Nicholas Hazel

Well, figured I'd offer a slightly different jQuerysolution to your dilemma for other people looking for additional help.

好吧，我想我会为jQuery寻求额外帮助的其他人提供稍微不同的解决方案来解决您的困境。

If you haveto use a script, might as well make it do everything (the following script takes 4.2msto run, which seems pretty reasonable to me :-)

如果您必须使用脚本，不妨让它做所有事情（以下脚本需要4.2ms运行，这对我来说似乎很合理:-)

Essentially what the below is doing is taking your tabular-dataand converting it to a multidimensional array.

本质上，下面所做的是将您的tabular-data并将其转换为multidimensional array.

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

Becomes:

变成：

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

Then, it's just a matter of having it rewrite your tablebased on the new arraywith a couple for-loops.

然后，这只是让它table根据新array的几个重写你的问题for-loops。

One thing to note, you would have to bind this to a media queryor window.resizehandler to get the acquired affect you're looking for. That is as easy as changing the on.clickhandler I have assigned.

需要注意的一件事是，您必须将其绑定到 amedia query或window.resize处理程序才能获得您正在寻找的影响。这就像更改on.click我分配的处理程序一样简单。

Take a look! It's pretty nifty:

看一看！它非常漂亮：

http://jsfiddle.net/jsR7n/1/

http://jsfiddle.net/jsR7n/1/

HTML:

HTML：

<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

jQuery Script:

jQuery 脚本：

$(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 );
            }
        }
    });
});

Hope this was helpful!

希望这是有帮助的！

http://jsfiddle.net/jsR7n/1/

http://jsfiddle.net/jsR7n/1/