Question

I would like to use

var merch = document.getElementById('merch');

to retrieve a table on my webpage, which is dynamically populated. Then I would like to iterate over the table, one row at a time, grabbing the

<td> 

elements and storing each of them as a string in an array. Each row will have its own array.

Can someone give me a clue as to how to accomplish this? I feel certain there is a simple method I just haven’t found in my searches.

Thank you in advance for your consideration.

Answer 1

The working demo.

var merch = document.getElementById('merch');

// this will give you a HTMLCollection
var rows = merch.rows;

// this will change the HTMLCollection to an Array
var rows = [].slice.call(merch.rows);   

// if you want the elements in the array be string.
// map the array, get the innerHTML propery.
var rows = [].slice.call(merch.rows).map(function(el) {
    return el.innerHTML;
});

map