Create Dynamic Tables in HTML5 and Javascript

The Task

I recently got asked to complete a test; in this test there was a requirement to create a dynamic HTML table. The requirement was that when data was entered into some fields; this would be used to populate the table.

There were a few other requirements; such as splitting on space; which I won’t cover in this post. We’re just looking at the dynamic tables.

How do we do this?

To do this we will be using HTML and and some Javascript. We need the Javascript to add the rows as we need them. I will keep this to the minimum; Javascript; as we don’t need that much. But it is required so..

The solution

Ok, lets get into this code.. First thing is we need to create a table.. So lets put that code together first

First, lets look at the HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>UI Demo</title>

<link href="Styles.css" rel="stylesheet" type="text/css"> <script src="Scripts.js">addName.counterRows = 0;</script>

</head> <body> <div id="container"> <div id="uiContainer"> Full Name : <input id="Name" type="text" name="Name"> Age : <input id="Age" type="number" name="Age">

<button onclick="addName(document.getElementById('Name').value, document.getElementById('Age').value,document.getElementById('counter').value)">Add</button>

<table id="namesTable"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> <tr>

</tr> </table> </div>

<div id="counterDiv"> Total Records : <input id="counter" type="number" value="0" readonly>



<;/body> </html>;

 This gives us a basic page that allows us to input some text value and number value and displays the table on the screen.. Quite simple so far.

The main part you want to look at is the button onclick function. This sets up the Javascript function and passes in the values so we can update them. The getElementById.<element>.value passes in the current value of that element; so for name its the value in the name text box.

Next, lets take a look at the CSS for this

#container { border: 4px solid darkblue; border-radius: 25px; padding: 30px;
/*center the container*/ width: 960px; margin: 0 auto; }
#Name { /* For Later Use */ }
#Age { /* For Later Use */ }
#namesTable tr:nth-child(even) { background: dimgray;}
#namesTable tr:nth-child(odd) { background: lightgray;}
#namesTable th { margin-top: 50px; background: royalblue; }
#namesTable { width: 100%; border-collapse: separate; empty-cells: show; }
#namesTable tr { /*display:block;*/ min-height:20px; }
#counterDiv { float: right; padding-bottom: 10px; }
#counter { float: right; border: none; width: 30px; }

This nicely sets up the formatting of the page; again nothing too complex.

So, finally. Next we can take a look at the simple Javascript function.

function addName(name, age, counter) { var table = document.getElementById("namesTable"); var row = table.insertRow(); var splitName = name.split(" "); /*Split name by space*/ var countRows = counter;

var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2);

cell1.innerHTML = splitName[0]; cell2.innerHTML = splitName[1]; cell3.innerHTML = age;

countRows++; document.getElementById("counter").value = countRows; }

This function takes in the values for name, age and counter. We then create some variables linking one to the table and then creating a new row in that table.

Next, using the split function we split the text where there is a space and create an array called splitName. This will contain the two parts of our name (first and last).

Next, we create some new cell elements for the new row. Finally we set the HTML (value) of these cells to the elements in the array and age. innerHTML does this.

Doing this will create a new row in the table; making it a nice dynamic table.. You can also delete rows but I will leave this for another post.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram