dynamic table rows in html

Question

I have an HTML Table with a single row

<table style="width:100%">
    <tr>
        <th>timestamp</th>
        <th>Longitude</th>
        <th>Latitude</th>
    </tr>

    <tr>
        <td>{{timestamp}}</td>
        <td>{{longitude}}</td>
        <td>{{latitude}}</td>
    </tr>
</table>

Now I have multiple rows retrieved from data base to add to the table and I want to insert some HTML code like

foreach ( row ){ <tr>
            <td>{{timestamp}}</td>
            <td>{{longitude}}</td>
            <td>{{latitude}}</td>
        </tr>}

Is it possible using only HTML? Do I need Jquery or javascript? How can I write code to have it done? PS: I can retrieve a number of rows. I have a Node.js backend

You need more learning.In this case, you can not just use html. — javad, Aug 22 '17 at 16:40

score 0 · Answer 1 · answered Aug 22 '17 at 16:32

HTML is a markup language. That means that all it does it present information and make things look pretty (among other things).

You can use JavaScript for this, or PHP, or even MVC Core if you're into that.

JavaScript's .innerHtml will help you out massively. For example, you could use something along the lines of...

document.getElementById("yourDivId").innerHTML = "<td>" + variable + "</td>";

From there, you could use a loop to cycle through your data and add whatever you need to the HTML! :) I hope this helps! Here's W3 School's article on JavaScripts innerHtml!

dynamic table rows in html

1 Answers1