How to use a HTML Table as a database through Javascript

As a professional blogger i am often reminded of the drawbacks of using blogger for doing something professional. One such thing is using databases. It is nearly impossible to use a big database file to create a dynamic page on blogger. But here i have successfully generated javascript to use a HTML Table as a database on a blogger post. However this feature is not just limited to usage on blogger platform (anyone can implement it), if javascript is allowed on client side. The best part is that the table (or database) is kept hidden while the dynamic page is generated.


The worst part of this type of implementation of database is that whole table (or database) is downloaded as a webpage and then dynamic page is created. It is not suggested if you are using a large database, as it will affect the page opening time and then processing of that data through java script.

<div id="hiddendiv" style="display: none;">
<table id="pollTable">
<tr><td></td><td>City</td></tr>
<tr><td>Afghanistan</td><td>Kabul - ISAF HQ</td></tr>
<tr><td>Afghanistan</td><td>Mazar-e Sharif - Camp Northern Lights </td></tr>
<tr><td>Andorra</td><td>Escaldes-Engordany</td></tr>
<tr><td>Argentina</td><td>Buenos Aires</td></tr>
<tr><td>Australia</td><td>Adelaide</td></tr>
<tr><td>Australia</td><td>Brisbane</td></tr>
<tr><td>Australia</td><td>Bunbury</td></tr>
<tr><td>United States of America</td><td>Cleveland-Elyria-Mentor, OH</td></tr>
<tr><td>United States of America</td><td>Clinton, IA</td></tr>
<tr><td>United States of America</td><td>Colorado Springs, CO</td></tr>
</table>
</div>
<form id="pollform" name="pollform">
<p id="selectcountry"></p>
<p id="selectcity"></p>
<p id="resultsentense"></p>
</form>

<script>
window.onload = populatecountries();
function populatecountries()
{
       var oldcountry="";
       var newcountry="";
       var selectcountry = "<b>Select your Country</b> : ";
       selectcountry = selectcountry + '<select name="country" onclick=populatecities()>';
       var myTab = document.getElementById('pollTable');
         // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (i = 0; i < myTab.rows.length; i++) 
        { 

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;
            newcountry = objCells.item(0).innerHTML;
            if (newcountry!=oldcountry)
            {
            selectcountry = selectcountry + '<option value="' + newcountry + '">' + newcountry + '</option>';
            oldcountry = newcountry;
            }
       }
        selectcountry = selectcountry + "</select>";
        document.getElementById('selectcountry').innerHTML = selectcountry;
}
function populatecities()
{
       var selectedcountry=document.pollform.country.value;
       var oldcity="";
       var newcity="";
       var selectcity = "<b>Select your City</b> : ";
       selectcity =selectcity + '<select name="city" onclick=writeresult()>';
       var myTab = document.getElementById('pollTable');
         // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (i = 0; i < myTab.rows.length; i++) 
        { 

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;
            if (selectedcountry==objCells.item(0).innerHTML)
            {
               newcity = objCells.item(1).innerHTML;
               if (newcity!=oldcity)
               {
                selectcity = selectcity + '<option value="' + newcity + '">' + newcity + '</option>';
                oldcity = newcity;
               }
            }
       }
        selectcity = selectcity + "</select>";
        document.getElementById('selectcity').innerHTML = selectcity;
}

function writeresult()
{
        var selectedcountry=document.pollform.country.value;
        var selectedcity=document.pollform.city.value;
        var resultstatement = '<h3>You have selected ' + selectedcity + ' , which is a popular city of ' + selectedcountry + '.</h3>' ;
        document.getElementById('resultsentense').innerHTML = resultstatement;
}
</script>

---

Result of the above code is provided below. Just select the country and city and see the magic.

---

	City
Afghanistan	Kabul - ISAF HQ
Afghanistan	Mazar-e Sharif - Camp Northern Lights
Andorra	Escaldes-Engordany
Argentina	Buenos Aires
Australia	Adelaide
Australia	Brisbane
Australia	Bunbury
United States of America	Cleveland-Elyria-Mentor, OH
United States of America	Clinton, IA
United States of America	Colorado Springs, CO

---

If you check the above code you will find that there is a table in above HTML code which looks like:

Country	City
Afghanistan	Kabul - ISAF HQ
Afghanistan	Mazar-e Sharif - Camp Northern Lights
Andorra	Escaldes-Engordany
Argentina	Buenos Aires
Australia	Adelaide
Australia	Brisbane
Australia	Bunbury
United States of America	Cleveland-Elyria-Mentor, OH
United States of America	Clinton, IA
United States of America	Colorado Springs, CO

This table is accessed by javascript. Country and Cities name are populated through it into the result form. When you select your preferred country, then it populates the cities name into the dropdown menu after searching for them in table. I you have got some knowledge of javascript then you may understand it better after looking into the code.