Where Did I Begin
Before WordPress; before even HTML4.. I used to create websites using HTML and a text editor. I progressed; through time; to using tools such as Dreamweaver back when it was still a version number and not beginning with CS.. I believe it was version 7 or something similar.
It has really only been the last 2 or so years that I have started using WordPress.
My Initial WordPress Experience
Like many who first find WordPress; I started with free Themes. I spent hours trying to find a theme that matched what I wanted. Hours going through the thousands of themes that were available. I found some that were close to what I was looking for but never quite right. So I started to learn how to make changes in the code (I am a Software Engineer after all) and editing to make the theme match; as close as possible; to what I wanted.
Premium Themes
My first foray into premium themes came after I saw Genesis Theme by StudioPress; I can't remember how I came across it. At the time I was doing reviews in my YouTube channel on products and I asked if I could try it out. It was great; although there was still some editing to be done to tweak some elements. I followed that up with a few other reviews on other premium themes; each one allowing me to make more changes without coding. The closest I came was the Catalyst Framework.
Then I Found Ultimatum
The Catalyst framework went a long way to creating the WordPress site that I wanted; but then one day I found Ultimatum. I found it by accident; an instructor I bought a course from on Udemy was talking about it and had a special deal.. I took that deal (its the first premium theme / framework I have bought) and have not looked back.
Ultimatum allows me to start with a completely blank slate. I then can build up Templates; template then can have layouts created. I can create layouts for all the different pages I want and the best of it is that it is my design, my creation and not one of someone else like most themes.
With each release of Ultimatum comes more options; more functionality; such as Bootstrap 3. Ultimatum has given me the ability to use WordPress but also design my own theme.
Now. I love Ultimatum and because of this I put that passion into a course. A course that I have on offer in this blog at a greatly reduced price of just $5. If your interested in finding out more then check out the link below. If you wanted to check it out for $5 then you can buy now. Its covered by a 30 day money back guarantee so you've got nothing to loose..
https://www.udemy.com/beginning-with-the-ultimatum-wordpress-theme-framework/?couponCode=SEANSBLOG
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>
</div>
</div>
<;/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.
