用于从 HTML 文件显示的格式数组答案

【问题标题】：Format array for display from HTML file用于从 HTML 文件显示的格式数组
【发布时间】：2015-09-11 10:32:36
【问题描述】：

我目前正在开发一个 Google Chrome 扩展程序，它将一个数组传递给一个 HTML 文件以显示结果。我的数组看起来像这样：

var Array = ['Jason Smith', 81, 'Japan', 'Paul Prince', 19, 'USA', 'Wesley JJ', 60, 'France']

我试图从 HTML 文件中显示它，看起来像：

杰森·史密斯
81                 日本

保罗·普林斯
19                美国

韦斯利 JJ
60                法国

这是我的 popup.html 文件：

<html>
    <head>
    <script src="popup.js"></script>
        <style type="text/css" media="screen">
            body { 
                min-width       : 400px;
                min-height      : 300px;
                text-align      : right;
                background-color: #D0D0D0; }
            #status { 
                font-size       : 10px;
                color           : #0000CC;
                text-align      : left;
                font-family     : "Times New Roman", Times, serif; }
        </style>
    </head>
    <body>
    <div id="status"></div>
    </body>
</html>

popup.js：

var port = chrome.extension.connect({name: "Sample Communication"});
port.onMessage.addListener(function(msg) {
        console.log(msg);
        document.getElementById('status').textContent = msg;
});

注意：“status”是从 background.js 传递给 popup.js 然后再传递给 popup.html 的数组（background.js 只是创建数组）。

在大多数情况下，这应该只是一个格式问题（除非我还遗漏了其他内容），因此对于格式化此数组的方法的任何帮助或见解将不胜感激。

更新：好的，所以我尝试了一些方法 - 就目前而言，我可以使用 Array.join(" ") 传递数组以简单地显示如下：

Jason Smith 81 日本 Paul Prince 19 美国 Wesley JJ 60 法国

我已经尝试在数组中输入一些中断标签 (br) 以及 \n ，但这似乎并没有将它们分成单独的行。我也尝试添加额外的空格，但这似乎是解决问题的笨拙方法。

【问题讨论】：

CSS / HTML / PHP Displaying List of Alternating Arrays (Google Chrome Extension)的可能重复
这个问题纯粹与问题中概述的要显示的数组的格式有关。
能否提供js代码？
是的，就像@AlbertoI.N.J.说，你能提供给我们你目前在 popup.js 中的内容吗？
谢谢大家！刚刚添加了一些代码

标签： html css arrays google-chrome-extension format

【解决方案1】：

您有一些数据，并且正试图将其放在表格中。最好的元素是<table> 元素！

这样的东西会根据需要生成一个表格：

var a = ['Jason Smith', 81, 'Japan', 'Paul Prince', 19, 'USA', 'Wesley JJ', 60, 'France'];
var str = "<table>"
for (var i=0; i<a.length; i+=3) {
    str += "<tr><td colspan=\"2\">" + a[i] + "</td></tr>";
    str += "<tr><td>" + a[i+1] + "</td><td>" + a[i+2] + "</td></tr>";
}
str += "</table>";

请注意，将所有数据存储在数组中会使此解决方案有些脆弱。例如，如果数组的长度不是三的整数倍，就会出现问题。如果您可以控制数据源，那么使用对象的东西会更整洁：

var a = [{
    name: 'Jason Smith',
    age: 81,
    country: 'Japan'
},{
    name: 'Paul Prince',
    age: 19,
    country: 'USA'
},{
    name: 'Wesley JJ',
    age: 60,
    country: 'France'
}];

然后你的循环变得不那么脆弱并且更容易阅读：

var str = "<table>"
for (var i=0; i<a.length; i++) {
    str += "<tr><td colspan=\"2\">" + a[i].name + "</td></tr>";
    str += "<tr><td>" + a[i].age + "</td><td>" + a[i].country + "</td></tr>";
}
str += "</table>";

【讨论】：

NB 这种构造字符串的方法可能不是最有效的，但是很简单。