如何打印HTML表格一列,而不是逐行打印?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (198)

我遇到这样的情况: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'
    }
];

在此之上,必须像打印表那样打印,以便其他行都有标题,而其他行都有内容。

我的问题是,由于HTML表的性质,我只知道如何像在fiddle中那样逐行打印它们。我想知道是否有一种合法和简单的方法逐列打印表格,因为这将简化情况,就像我现在所做的那样。

为了进一步澄清这一问题,目前的情况如下:

这就是我想让事情变得更好的方式:

或简化图片:

正如你所看到的,对于数据来说,首选的方法看起来更符合逻辑和更易于控制,就像我们这里所做的那样。那么,如何将HTML表输出为列方式,而不是行方式呢?

提问于
用户回答回答于

逻辑很简单:

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);
用户回答回答于

你应该使用DIV而不是表,你可以使用浮子属性。

扫码关注云+社区

领取腾讯云代金券