JavaScript printing 2D array into HTML table

Question

I am using JavaScript to produce a HTML table printing out the elements of a 2D array. I have an array that is used to create the Headers (columnNames) and an array to print the contents of each row (dataArray). So far I have:

function addTable(columnNames, dataArray) {

  var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.body.appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "myTr");
    document.getElementById("myTable").appendChild(y);

//add column names

for (i = 0; i < columnNames.length; i++) {

   var th = document.createElement("TH");
    var columns = document.createTextNode(columnNames[i]);
    th.appendChild(columns);
    document.getElementById("myTr").appendChild(th);
}

And this gives me a table:

enter image description here

However i now want to loop through my 2d array “dataArray” and print out everything into 12 rows. I have the algorithm below but this only works for one row. Can anyone help me out please?

column = 0;

var y2 = document.createElement("TR");
    y2.setAttribute("id", "myTr2");
    document.getElementById("myTable").appendChild(y2);

while(column < 8){
 var th2 = document.createElement("TD");
  var date2 = document.createTextNode(dataArray[0][column]);
  th2.appendChild(date2);
  document.getElementById("myTr2").appendChild(th2);

column++;
}

enter image description here

I know im missing some sort of rows loop but have trialed and error'd lots of different algorithms so far with no luck. I want to have 12 rows for example. I used a 0 for the 1st array index just so i could display something but id ideally want that value to increment to a max number.

Rick Hitchcock · Accepted Answer · 2015-02-22 11:37:45Z

3

ids in HTML should be unique, but you're using the same id for each row: myTr2.

You already have a reference to the newly-created row, y2:

y2 = document.createElement("TR");

Use it instead of trying to use its non-unique id:

y2.appendChild(th2);

You also have a reference to the newly-create table:

var x = document.createElement("TABLE");

You can refer to it similarly instead of its id like this:

x.appendChild(y);

In my snippet below, I changed the variable x to myTable, and I used a nested loop to iterate through dataArray instead of using a column variable:

Snippet

function addTable(columnNames, dataArray) {
  var myTable = document.createElement('table');
  
  document.body.appendChild(myTable);

  var y = document.createElement('tr');
  myTable.appendChild(y);

  for(var i = 0; i < columnNames.length; i++) {
    var th = document.createElement('th'),
        columns = document.createTextNode(columnNames[i]);
    th.appendChild(columns);
    y.appendChild(th);
  }

  for(var i = 0 ; i < dataArray.length ; i++) {
    var row= dataArray[i];
    var y2 = document.createElement('tr');
    for(var j = 0 ; j < row.length ; j++) {
      myTable.appendChild(y2);
      var th2 = document.createElement('td');
      var date2 = document.createTextNode(row[j]);
      th2.appendChild(date2);
      y2.appendChild(th2);
    }
  }
} //addTable

addTable(['Date','bbcfour','bbcnews24','bbcone','bbcthree','bbctwo','cbbc','cbeebiese'],
         [['2009-01','324','1075','940','441','1040','898','1343'],
          ['2009-02','524','9075','840','341','1140','398','1323'],
          ['2009-03','224','3075','340','461','1050','828','1345']
         ]
);

table {
  border-collapse: collapse;
}

th, td {
  padding: 0.3em;
  border: 1px solid silver;
}

edited Feb 22, 2015 at 11:37

answered Feb 22, 2015 at 11:17

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2219097 Over a year ago

thank you, thats useful. However It doesn't help me towards printing multiple set of elements from my 2d array

Rick Hitchcock Over a year ago

Here's a full example: jsfiddle.net/0jq3av1c I'll update my answer with more explanation in a bit.

user2219097 Over a year ago

thank you so much for your time and effort. I really really appreciate it! Thats brilliant thanks :)

Collectives™ on Stack Overflow

JavaScript printing 2D array into HTML table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related