Last active
May 25, 2016 06:19
-
-
Save abhijeetchopra/c34a58e686f88bc210349d481ef55aba to your computer and use it in GitHub Desktop.
How to dynamically create HTML table with JavaScript and perform operations on events.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>My First HTML</title> | |
| <script> | |
| // This script is originally written for the Stackoverflow.com question: http://stackoverflow.com/q/37426390/4798534 | |
| function tableCreate() { | |
| var body = document.getElementsByTagName('body')[0]; | |
| var tbl = document.createElement('table'); | |
| tbl.style.width = '100%'; | |
| tbl.setAttribute('border', '1'); | |
| var tbdy = document.createElement('tbody'); | |
| for (var i = 0; i < rowNum.value; i++) { | |
| var tr = document.createElement('tr'); | |
| for (var j = 0; j < 3; j++) { | |
| var td = document.createElement('td'); | |
| td.appendChild(document.createTextNode('\u0020')) | |
| tr.appendChild(td) | |
| if(i==0){ | |
| // ROW 1 ---------- | |
| if(j==0){td.innerHTML = 'Quantity';} | |
| if(j==1){td.innerHTML = 'Price';} | |
| if(j==2){td.innerHTML = 'Value';} | |
| } | |
| else { | |
| // ROW 2 onwards ---------- | |
| if(j==0){td.innerHTML = '<input id ="Q' + i + '" type="text" />';} | |
| if(j==1){td.innerHTML = '<input id ="P' + i + '" type="text" onchange="refreshValue(this.id)"/>';} | |
| if(j==2){td.innerHTML = '<input id ="V' + i + '" type="text" />';} | |
| } | |
| } | |
| tbdy.appendChild(tr); | |
| } | |
| tbl.appendChild(tbdy); | |
| body.appendChild(tbl) | |
| } | |
| // This function is called when a value is changed in the textboxes | |
| // When called, this function takes the id as the argument | |
| function refreshValue(elementID){ | |
| var str = elementID.substring(1, 2); | |
| var elementVal = document.getElementById(elementID).value; | |
| var qstr1 = "Q"; var pstr1 = "P"; var vstr1 = "V"; | |
| var qStr = qstr1.concat(str); | |
| var pStr = pstr1.concat(str); | |
| var vStr = vstr1.concat(str); | |
| var qVal = document.getElementById(qStr).value; | |
| var pVal = document.getElementById(pStr).value; | |
| var vVal = qVal * pVal; | |
| document.getElementById(vStr).value = vVal; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <input id="rowNum" type="text"> | |
| <input type="submit" onclick="tableCreate()"> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment