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
Post a Comment