Question

我遇到这样的情况：https://jsfiddle.net/ahvonenj/xrrqzypL/

不知道数据数组中是否有偶数或奇数的对象，因此所有这些都是有效的，例如：

var data = 
[
    {
        title: 'Title A',
        content: 'Content A'
    },
    {
        title: 'Title B',
        content: 'Content B'
    },
    {
        title: 'Title C',
        content: 'Content C'
    }
];

var data = 
[
    {
        title: 'Title A',
        content: 'Content A'
    },
    {
        title: 'Title B',
        content: 'Content B'
    }
];

var data = 
[
    {
        title: 'Title A',
        content: 'Content A'
    }
];

最重要的是，必须打印表格，以便每隔一行都有标题，而每隔一行都有内容。为了澄清，我链接的jsfiddle是一个有效的解决方案，但太复杂了。此外，如果数据中有奇数个对象，那么最后的标题和内容单元格不应该像小提琴那样存在。

我的问题是，由于HTML表格的性质，我只知道如何在小提琴中逐行打印它们。我想知道是否有一种合法且简单的方法来逐列打印表格，因为这样可以简化我目前在这里的情况。

为了进一步澄清问题，这就是目前的工作方式：

这就是我喜欢的工作方式：

或简化图片：

正如您所看到的，首选方法看起来更像逻辑和可控制的数据，就像我们在这里一样。那么我们如何以列方式打印HTML表格而不是行方式？

Answer 1

您应该使用DIV代替TABLE。您可以使用 float 属性将DIV像TABLE一样浮动。如果您需要任何进一步的帮助，请告诉我。

Answer 2

逻辑很简单

var insert = '';

var col1 = [];
for(var i = 0; i < data.length/2; i++) {
        col1.push(data[i]);
}
var col2 = [];
for(; i < data.length; i++) {
        col2.push(data[i]);
}


for(var row = 0; row < data.length/2; row++)
{
        var rowHtml = "<tr><td>" + col1[row].title + "</td>";
        if (col2[row]) {
                rowHtml += "<td>" + col2[row].title + "</td>";
        }
        rowHtml += "</tr>";
        rowHtml += "<tr><td>" + col1[row].content + "</td>";
        if (col2[row]) {
                rowHtml += "<td>" + col2[row].content + "</td>";
        }
        rowHtml += "</tr>"
        insert += rowHtml;
}

$('#tbl').append(insert);

我还强烈建议使用DOM（或jQuery API）来构建html而不是字符串连接，因为它的计算效率更高。

Answer 3

我制作了一个纯CSS解决方案 - ish：http://jsfiddle.net/ahvonenj/L02z8bh3/ 我觉得这样的事就足够了。

我只需将整个桌子翻转90度transform: rotate(90deg);

逐行打印HTML表格而不是逐行打印？

3 个答案: