I have a javascript array and I want to show parts of it in HTML.

For example what html code would I use in the body to show a table of just the info from QR4 - the number and the country? There are other parts to the array so to show the whole QR4 array would be fine, but Id also like to know how to select specific parts

QR4[25]  = "China";
QR4[24]  = "39241000";

QR8[25]  = "China";
QR8[24]  = "39241000";

QR8L[25] = "China";
QR8L[24] = "39241000";

QR4L[25] = "China";
QR4L[24] = "39241000";

I have this code making a table in php using csv which works fine but I want it client side, not server side. A table like this would be fine...

<?php
echo "<table>\n\n";
$f = fopen("csv.csv", "r");
while (!feof($f) )  {
    echo "<tr>";
    $line_of_text = fgetcsv($f);
            echo "<td>" .  $line_of_text[10] . "</td>";

    echo "<tr>\n";
}
fclose($f);
echo "\n</table>";
?>

I have a javascript array and I want to show parts of it in HTML.

For example what html code would I use in the body to show a table of just the info from QR4 - the number and the country? There are other parts to the array so to show the whole QR4 array would be fine, but Id also like to know how to select specific parts

QR4[25]  = "China";
QR4[24]  = "39241000";

QR8[25]  = "China";
QR8[24]  = "39241000";

QR8L[25] = "China";
QR8L[24] = "39241000";

QR4L[25] = "China";
QR4L[24] = "39241000";

I have this code making a table in php using csv which works fine but I want it client side, not server side. A table like this would be fine...

<?php
echo "<table>\n\n";
$f = fopen("csv.csv", "r");
while (!feof($f) )  {
    echo "<tr>";
    $line_of_text = fgetcsv($f);
            echo "<td>" .  $line_of_text[10] . "</td>";

    echo "<tr>\n";
}
fclose($f);
echo "\n</table>";
?>

• javascript

• 3 Just a note, you have several arrays in the example, not just one. And from what I understand, you want to show all the elements of the QR4 array? – Edgar Commented Sep 12, 2011 at 13:24
• What do you want the table to look like? Can you type in by hand a sample? – Pointy Commented Sep 12, 2011 at 13:24
• 1 Arrays: You're doing it wrong. Variable names: You're doing it wrong. Fix these two and e play again. – Incognito Commented Sep 12, 2011 at 14:10
• I made an array from a csv. Whats the best way to get this showing client side? Im not stuck on arrays or var names but that seemed to be the suggested way to do this... – Jon Commented Sep 12, 2011 at 14:28

3 Answers 3

Here is a really simple example of how you could do it.

Check this fiddle.

You have to pass an array to the function displayArrayAsTable(). You can then specify the range of the array to insert into the table, for example from 24 to 25 like you asked, otherwise all the array will be processed.

The function will return a table element you can then append where you find more appropriate, or tweak the function so that will always insert it for you where you want.

To show all rows of the QR4 array in a HTML table use this:

<table>
    <tr>
        <th>ID</th>
        <th>City</th>
    </tr>

    <script type="text/javascript">
    for(id in QR4)
    {
        document.write('<tr><td>' + id + '</td><td>' + QR4[id] + '</td></tr>');
    }
    </script>
</table>

To show specific elements from the Javascript array in a HTML table use this:

<table>
    <tr>
        <th>Number</th>
        <th>City</th>
    </tr>

    <script type="text/javascript">
        document.write('<tr><td>' + QR4[24] + '</td><td>' + QR4[25] + '</td></tr>');
    </script>
</table>

As I suspect you want to bine the QR[24] and QR[25] elements in one row, that's what I did in my second code sample. But if that's the situation, your array structure isn't very logical.

I gave you the code samples to select data from Javascript arrays and put them in HTML tables, now it's on you to use it the way you need it.. Because that isn't clear to me at all..

Assuming you already have the table defined, you can use some simple DOM methods to add and delete rows.

var table = document.getElementById("mytable");
for(i=0; i < QR4.length;i++) {
  var row = table.insertRow(table.rows.length);
  var cell = row.insertCell(0);
  cell.innerHTML = QR4[i];
}