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.
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..
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 >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.
So, to set the scene. I'm currently away on a break. I was out walking…
Creating a WordPress SEO plugin from scratch is an ambitious yet rewarding endeavor that can…
Introduction to API Endpoint Development Understanding API Endpoints API endpoints serve as the communicative bridges…
The innate human desire to learn and grow is a fundamental part of our nature.…
When working within the Spring framework, developers often encounter scenarios where transactional integrity is crucial…
Introduction to @Autowired in Java Spring Boot What is Dependency Injection? Dependency Injection (DI) is…