rendering array values in an html table

Question

My html page is currently loading with an array of arrays, from previous redirect. Each element in the array should be rendered on a table.

So for example the array is [[h1,h2,h3,1,2,3,4,5,6], [h1,h2,h3,7,8,9,10,11,12]]

The first table should look like this
h1 h2 h3
1 2 3
4 5 6

Similarly the others.

Below is the html formatting of the table.

<table style="width:50%">
            <tr>
                <th><font color="black"><b>h1</b></font></th>
                <th><font color="black"><b>h2</b></font></th>
                <th><font color="black"><b>h3</b></font></th>

            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>

            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>

            </tr>
    </table>
    <br>

How can I make a javascript function such that on loading the page it renders all the data in the array in the html table format as mentioned above.

Thank you for your input and time.

Have you tried writing any code yourself? Where did you get stuck? Share any code if you have. We can help, but we're not here to code the solution for you. — Roy Scheffers
– Roy Scheffers, Commented Jul 29, 2018 at 13:37
A good start would be mapping over the array and again over the inner one. The outer one creating the html structure for your table and the inner creating the rows and cells. Append the final result to an element already on the page. Have a look at Array.map to get going. — Roy Scheffers
– Roy Scheffers, Commented Jul 29, 2018 at 13:41

DaFois · Accepted Answer · 2018-07-29 13:42:12Z

this is a basic code you can start from:

<?php 
$array = [['h1','h2','h3','1','2','3','4','5','6'], ['h1','h2','h3','7','8','9','10','11','12']];
echo '<table>';
foreach($array as $value) {
    echo '<tr>';
        echo '<td>'.$value[0].'</td>';
        echo '<td>'.$value[1].'</td>';
        echo '<td>'.$value[2].'</td>';
    echo '</tr>';
    echo '<tr>';
        echo '<td>'.$value[3].'</td>';
        echo '<td>'.$value[4].'</td>';
        echo '<td>'.$value[5].'</td>';
    echo '</tr>';
}
echo '</table>';

and this is its output

<table>
    <tbody>
        <tr>
            <td>h1</td>
            <td>h2</td>
            <td>h3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>h1</td>
            <td>h2</td>
            <td>h3</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

Fabio Bianchi · Accepted Answer · 2018-07-29 14:09:46Z

You could assign an "id" to the html table to be able to create and attach DOM elements with Javascript

Here you can find some reference about Document object in JS: https://developer.mozilla.org/en-US/docs/Web/API/Document/Document

how to create html elements: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

var createHeaderElem = function(value) {
    var th = document.createElement('th');
    th.appendChild(document.createTextNode(value));
    return th;
}

var createRowElem = function(value) {
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(value));
    return td;
}

var input = ['h1','h2','h3',1,2,3,4,5,6];

var table = document.getElementById('content-table');

var trHeader = document.createElement('tr');

trHeader.appendChild(createHeaderElem(input[0]));
trHeader.appendChild(createHeaderElem(input[1]));
trHeader.appendChild(createHeaderElem(input[2]));

table.appendChild(trHeader);

var trBody = document.createElement('tr');

trBody.appendChild(createRowElem(input[3]));
trBody.appendChild(createRowElem(input[4]));
trBody.appendChild(createRowElem(input[5]));

table.appendChild(trBody);

var trBody = document.createElement('tr');

trBody.appendChild(createRowElem(input[6]));
trBody.appendChild(createRowElem(input[7]));
trBody.appendChild(createRowElem(input[8]));

table.appendChild(trBody);

<table id="content-table" style="width:50%">

</table>

Collectives™ on Stack Overflow

rendering array values in an html table

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related