I need to get all the values from a column (except header value of course), then populate an array with the column values. I am restricted to native JavaScript.

This is a table header:

<table id="results" width="360" border="1">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
  </table>

And this is how the rows are created:

      var table = document.getElementById("results");
      var name = document.getElementById("tbName").value;
      var elements = document.getElementsByTagName("select")
      var testArray = [];
      var test;
      for(var i=0; i < elements.length ; i++)
      {
        testArray[i] = elements[i].value;
      }
      test = testArray.join(',');

      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth()+1; 
      var yyyy = today.getFullYear();

      if(dd<10) {
          dd='0'+dd
      } 

      if(mm<10) {
          mm='0'+mm
      } 

      today = mm+'/'+dd+'/'+yyyy;

      //In the first step using InsertRow function you are creating a first row i.e tr 
      var row = table.insertRow(table.rows.length);

      //In the second step you create a cell i.e td dynamically
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);

      // Here in step 3 you can add data to your cells from the modal popup inputs(According to your logic)
      cell1.innerHTML = today;
      cell2.innerHTML = name;
      cell3.innerHTML = test;

Again I would like to populate an array with the values in the column Name.

I need to get all the values from a column (except header value of course), then populate an array with the column values. I am restricted to native JavaScript.

This is a table header:

<table id="results" width="360" border="1">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
  </table>

And this is how the rows are created:

      var table = document.getElementById("results");
      var name = document.getElementById("tbName").value;
      var elements = document.getElementsByTagName("select")
      var testArray = [];
      var test;
      for(var i=0; i < elements.length ; i++)
      {
        testArray[i] = elements[i].value;
      }
      test = testArray.join(',');

      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth()+1; 
      var yyyy = today.getFullYear();

      if(dd<10) {
          dd='0'+dd
      } 

      if(mm<10) {
          mm='0'+mm
      } 

      today = mm+'/'+dd+'/'+yyyy;

      //In the first step using InsertRow function you are creating a first row i.e tr 
      var row = table.insertRow(table.rows.length);

      //In the second step you create a cell i.e td dynamically
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);

      // Here in step 3 you can add data to your cells from the modal popup inputs(According to your logic)
      cell1.innerHTML = today;
      cell2.innerHTML = name;
      cell3.innerHTML = test;

Again I would like to populate an array with the values in the column Name.

• javascript

• Why dont you store them on creation? Or are they changed by usef? – Jonas Wilms Commented Aug 10, 2016 at 13:13
• @Jonasw Yes they are. The are added dynamically. User fills in form, clicks the button and new row is added to table... So on the creation table rows are empty... – nemo_87 Commented Aug 10, 2016 at 13:14

3 Answers 3

There you go. I think the code is so descriptive it doesn't need further explanation :)

var firstCells = document.querySelectorAll('td:nth-child(2)');
var cellValues = [];
firstCells.forEach(function(singleCell) {
  cellValues.push(singleCell.innerText);
});
console.log(cellValues);

 //get parent element
 parent=document.getElementById("name");
//get all tags inside this element
 childs=parent.getElementsByTagName("td or sth like that");
//create an empty array
names=[];
//loop through childs
childs.forEach(child){
     //add child balue to array
     names.push(child.value);
});

var table = document.getElementById("result"); //ur table id
var rows = table.getElementsByTagName("tr");
var output = [];
for(var i=0;i<rows.length;i++)
{
output.push(rows[i].getElementsByTagName("td")[1].innerHTML);//instead of 1 pass column index
}
alert(output);