Print array elements into their respective column in JavaScript

Question 1

If you are trying to print out the contents of a JavaScript array into the DOM as a table, then have a look at the following example.

var firstNames = ['Marc', 'John', 'Drew', 'Ben'];
var lastNames = ['Wilson', 'Smith', 'Martin', 'Wilcox'];

var htmlStr = "<tbody>";
for(int i=0; i < firstNames.length; ++i) {
    htmlStr += "<tr>";
    htmlStr += "<td>" + firstNames[i] + "</td>";
    htmlStr += "<td>" + lastNames[i] + "</td>";
    htmlStr += "</tr>";
}
htmlStr += "</tbody>"

In this example I have created the tbody of your table and then populated it with the contents of your two arrays. I have split it into more steps than needed so that it is easier to see what is going on. Once you understand what is going on here, you can add the header to this and then add it to the DOM.

Question 2

You'll have an easier time printing a table of values if you rearrange your data such that it looks like this...

in javascript:

//structure the array this way
var names = [
    { first: 'john', last: 'smith' },
    { first: 'frank', last: 'ricard' }
    { first: 'jimi', last: 'hendrix' }
];


//Then, you can simply iterate through the array and build a table.
for(var i = 0; names.length; i++) {
    var name = names[i];
    var first = name.first
    var last = name.last

    //build your table markup in here.
}

or in php:

//structure array this way
$names = array(
    array('first' => 'john', 'last'=>'smith'),
    array('first' => 'frank', 'last'=>'ricard'),
    array('first' => 'jimi', 'last'=>'hendrix')
);

//iterate through array this way
foreach($names as $name) {
    $first = $name['first'];
    $last = $name['last'];
    //build your table markup in here.
}

Question 3

I would do something more like:

var doc = document;
function E(e){
  return doc.getElementById(e);
}
function PersonalInformation(){
  function C(e){
    return doc.createElement(e);
  }
  this.FirstNameTableHead = 'First Name';
  this.LastNameTableHead = 'Last Name';
  this.FirstNames = ['Marc', 'John', 'Drew', 'Ben'];
  this.LastNames = ['Wilson', 'Smith', 'Martin', 'Wilcox'];
  this.addName = function(first, last){
    this.FirstNames.push(first);
    this.LastNames.push(last);
  }
  this.createTable = function(){
    var nd = C('div'), tbl = C('table'), tr1 = C('tr'), th1 = C('th'), th2 = C('th');
    var fnh = doc.createTextNode(this.FirstNameTableHead);
    var lnh = doc.createTextNode(this.LastNameTableHead);
    th1.appendChild(fnh); th2.appendChild(lnh); tr1.appendChild(th1);
    tr1.appendChild(th2); tbl.appendChild(tr1);
    var fn = this.FirstNames, ln = this.LastNames;
    for(var i in fn){
      var tr = C('tr'), td1 = C('td'), td2 = C('td');
      var tn1 = doc.createTextNode(fn[i]), tn2 = doc.createTextNode(ln[i]);
      td1.appendChild(tn1); td2.appendChild(tn2); tr.appendChild(td1);
      tr.appendChild(td2); tbl.appendChild(tr);
    }
    nd.appendChild(tbl);
    return nd.innerHTML;
  }
}
var PI = new PersonalInformation();
E('wherever').innerHTML = PI.createTable();

This Constructor creates a table with your First and Last Names, and more, and returns it as a string. You can use .innerHTML to insert it. See the Fiddle.