Creating tables in pure HTML can be annoying at times. Instead, let's use JavaScript and JSON to create table rows!
Step 1 - Create JSON
[
{"id": 1, "firstName": "John", "lastName": "Doe" },
{ "id": 2, "firstName": "Jane", "lastName": "Doe" },
{ "id": 3, "firstName": "Bill", "lastName": "Doe" },
{ "id": 4, "firstName": "Abraham", "lastName": "Lincoln" },
{ "id": 5, "firstName": "Bill", "lastName": "Gates" },
{ "id": 6, "firstName": "Steve", "lastName": "Jobs" },
{ "id": 7, "firstName": "Bill", "lastName": "Clinton" },
{ "id": 8, "firstName": "Joe", "lastName": "Biden" },
{ "id": 9, "firstName": "Kamala", "lastName": "Harris" },
{ "id": 10, "firstName": "Queen", "lastName": "Elizabeth" },
{ "id": 11, "firstName": "Bob", "lastName": "Doe" }
]
Step 2 - Insert it in JS
var data = [
{"id": 1, "firstName": "John", "lastName": "Doe" },
{ "id": 2, "firstName": "Jane", "lastName": "Doe" },
{ "id": 3, "firstName": "Bill", "lastName": "Doe" },
{ "id": 4, "firstName": "Abraham", "lastName": "Lincoln" },
{ "id": 5, "firstName": "Bill", "lastName": "Gates" },
{ "id": 6, "firstName": "Steve", "lastName": "Jobs" },
{ "id": 7, "firstName": "Bill", "lastName": "Clinton" },
{ "id": 8, "firstName": "Joe", "lastName": "Biden" },
{ "id": 9, "firstName": "Kamala", "lastName": "Harris" },
{ "id": 10, "firstName": "Queen", "lastName": "Elizabeth" },
{ "id": 11, "firstName": "Bob", "lastName": "Doe" }
];
Step 3 - Create a HTML file
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Tables in HTML</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.0.0/dist/css/materialize.min.css">
<!--Just for styles-->
</head>
<body>
<div class="container"><br>
<h3>
Users in database
</h3>
<br>
<table>
<thead>
<tr>
<td>
<b>First name</b>
</td>
<td>
<b>Last Name</b>
</td>
</tr>
</thead>
<tr id="root"></tr>
</table>
</div>
<br>
</body>
</html>
Step 4 - The fun part.
Here we're going to use forEach and insertAdjacentHTML to create a row for every object in data
var root = document.getElementById('root');
data.forEach(element => root.insertAdjacentHTML('beforebegin', `<tr><td>${element.firstName}</td><td>${element.lastName}</td></tr>`));
Final code
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Tables in HTML</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.0.0/dist/css/materialize.min.css">
<!--Just for styles-->
</head>
<body>
<div class="container"><br>
<h3>
Users in database
</h3>
<br>
<table>
<thead><tr><td><b>First name</b></td><td><b>Last Name</b></td></tr></thead>
<tr id="root"></tr>
</table>
</div>
<br>
<script>
var data = [
{"id": 1, "firstName": "John", "lastName": "Doe" },
{ "id": 2, "firstName": "Jane", "lastName": "Doe" },
{ "id": 3, "firstName": "Bill", "lastName": "Doe" },
{ "id": 4, "firstName": "Abraham", "lastName": "Lincoln" },
{ "id": 5, "firstName": "Bill", "lastName": "Gates" },
{ "id": 6, "firstName": "Steve", "lastName": "Jobs" },
{ "id": 7, "firstName": "Bill", "lastName": "Clinton" },
{ "id": 8, "firstName": "Joe", "lastName": "Biden" },
{ "id": 9, "firstName": "Kamala", "lastName": "Harris" },
{ "id": 10, "firstName": "Queen", "lastName": "Elizabeth" },
{ "id": 11, "firstName": "Bob", "lastName": "Doe" }
];
var root = document.getElementById('root');
data.forEach(element => root.insertAdjacentHTML('beforebegin', `<tr><td>${element.firstName}</td><td>${element.lastName}</td></tr>`));
</script>
</body>
</html>
Top comments (0)