是否逐列打印HTML表，而不是逐行打印？
是否逐列打印HTML表，而不是逐行打印？
提问于 2015-10-05 17:10:29
我有这样的情况：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表格，而不是以行的方式打印呢？
回答 2
Stack Overflow用户
发布于 2015-10-05 18:11:23
逻辑非常简单明了
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应用程序接口)来构建html，而不是字符串连接，因为它在计算机上的效率要高得多。
Stack Overflow用户
发布于 2015-10-09 18:17:53
我做了一个纯CSS的解决方案：http://jsfiddle.net/ahvonenj/L02z8bh3/，我想这样就足够了。
我把整张桌子翻转90度transform: rotate(90deg);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32944871
复制相关文章
相似问题