CSS / HTML / PHP Displaying List of Alternating Arrays (Google Chrome Extension)

问题

I'm trying to create a google chrome extension in which several different arrays (Name, Age, Country etc.) are passed to the popup.html and they are displayed using HTML / CSS / PHP something similar to:

John Doe 28
America

Paul Smith 58
Japan

Robert Green 39
Germany

I'm able to pass each array to popup.html except only the last array passed is displayed - I haven't been able to find a way to display each entry of alternating arrays.

At this point I'm confused as to what my approach should be. Should I be using lists, or changing the way the arrays are passed to the HTML file or is there a simple way to display alternating arrays?

Any help would be greatly appreciated! Thank you!

Note:

Name = ['John Doe', 'Paul Smith', 'Robert Green']
Age = [28, 58, 39]
Country = ['America', 'Japan', 'Germany']

EDIT - UPDATED WITH SAMPLE CODE

('msg' is a single array for demonstration purposes passed into popup.js from background.js)

popup.js:

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

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>

Running this simply displays the array in a comma-separated paragraph. From more research it seems that using PHP might be the easiest way to implement a table; however, I'm still unsure whether it is possible to pass the array into the table.

回答1:

You are simply overwriting your display each time you receive a new piece of data:

port.onMessage.addListener(function(msg) {
  // This wipes the old value:
  document.getElementById('status').textContent = msg;
});

You'll need to either append data, or better yet pass all of the data at once, format it properly, and then output it to the page.

It's really hard to be more detailed with the answer since: 1) you don't seem to know very well what you're doing, 2) there are no precise specifications in the question.

You should practice a bit more on your own and look up a few tutorials, otherwise helping you won't really be helpful to you, or to others. Then, if you still have questions (probably not extension-specific), split them into chunks and post here. This guide helps.

来源：https://stackoverflow.com/questions/31015662/css-html-php-displaying-list-of-alternating-arrays-google-chrome-extension

标签

php

html

css

arrays

google-chrome-extension