html - Print array elements into their respective column in JavaScript -


i have requirement take array in javascript , print out screen in table-like format. can column headers print without issue i'm struggling getting data print under columns in table manner....

javascript file (the data file):

var firstnames = new array(); var lastnames = new array();   firstnames[0] = 'marc';  firstnames[1] = 'john';  firstnames[2] = 'drew';  firstnames[3] = 'ben';   lastnames[0] = 'wilson';  lastnames[1] = 'smith';  lastnames[2] = 'martin';  lastnames[3] = 'wilcox';  var personalinformation = {     firstname : firstnames,    lastname : lastnames  }; 

html file:

<!doctype html /> <html> <title>the data structure</title> <body>  <script type="text/javascript" src="thedata.js"></script> <script>     function printobj(theobject){         var theoutputtable = '';         var theoutputheader = '';          //print column headers table.         (var thecolumnheaders in theobject){             var createthetagtr = document.createelement('th');             var thecolumntext = document.createtextnode(thecolumnheaders);             createthetagtr.appendchild(thecolumntext);             document.body.appendchild(createthetagtr);         }          //eventually, print data in repsective columns row.         (var property in theobject){             theoutput = theobject[property];             var theelement = document.createelement('tr');             var thetext = document.createtextnode(theoutput);             theelement.appendchild(thetext);             document.body.appendchild(theelement);         }        }     printobj(personalinformation); </script> </body> </html> 

if trying print out contents of javascript array dom table, have @ following example.

var firstnames = ['marc', 'john', 'drew', 'ben']; var lastnames = ['wilson', 'smith', 'martin', 'wilcox'];  var htmlstr = "<tbody>"; for(int i=0; < firstnames.length; ++i) {     htmlstr += "<tr>";     htmlstr += "<td>" + firstnames[i] + "</td>";     htmlstr += "<td>" + lastnames[i] + "</td>";     htmlstr += "</tr>"; } htmlstr += "</tbody>" 

in example have created tbody of table , populated contents of 2 arrays. have split more steps needed easier see going on. once understand going on here, can add header , add dom.


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -