Loop through table and extract specifics cells

Question

I am having difficulty using jQuery to loop though a table, then extract specifics cells.
I know this can be done with .each, I don't have a code to share as example but I am trying as we speak, I am just looking for some suggestions. I will share any code I can come up with.

What would be the best way to achieve this?

Code Snippet:

<table id="tablemain" class="tableclass">
  <thead>
    <tr>
      <th>A</th>
      <th>Site1</th>
      <th>Site2</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>
      <th>K</th>
      <th style="width: 10%;">L</th>
      <th>M</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row0" class="parent">
      <td class="radioTableDetails awarded-td-background-color">Name1</td>
      <td colspan="11">&nbsp;</td>
      <td class="version-Link-Table even-td-TableDetails">&nbsp;</td>
    </tr>
    <tr id="row0" class="child">
      <td class="child-row-Table-Details"><strong>Arrival</strong></td>
      <td class="even-td-TableDetails">06/06/2017 09:30</td>
      <td class="odd-td-TableDetails">06/06/2017 16:00</td>
      <td class="even-td-TableDetails">A</td>
      <td class="odd-td-TableDetails">B</td>
      <td class="even-td-TableDetails">D</td>
      <td class="odd-td-TableDetails">E</td>
      <td class="even-td-TableDetails">&nbsp;</td>
      <td class="odd-td-TableDetails">F</td>
      <td class="even-td-TableDetails">G</td>
      <td class="odd-td-TableDetails">H</td>
      <td class="even-td-TableDetails diff-td-text-color">I</td>
      <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
    </tr>
    <tr id="row0" class="child">
      <td class="child-row-Table-Details"><strong>Departure</strong></td>
      <td class="even-td-TableDetails">06/06/2017 10:00</td>
      <td class="odd-td-TableDetails">-</td>
      <td class="even-td-TableDetails" colspan="9">-</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="row1" class="parent">
      <td class="radioTableDetails">Name2</td>
      <td colspan="11">&nbsp;</td>
      <td class="version-Link-Table even-td-TableDetails">&nbsp;</td>
    </tr>
    <tr id="row1" class="child">
      <td class="child-row-Table-Details"><strong>Arrival</strong></td>
      <td class="even-td-TableDetails">06/06/2017 10:30</td>
      <td class="odd-td-TableDetails">06/06/2017 17:00</td>
      <td class="even-td-TableDetails">A</td>
      <td class="odd-td-TableDetails">B</td>
      <td class="even-td-TableDetails">D</td>
      <td class="odd-td-TableDetails">E</td>
      <td class="even-td-TableDetails">&nbsp;</td>
      <td class="odd-td-TableDetails">F</td>
      <td class="even-td-TableDetails">G</td>
      <td class="odd-td-TableDetails">H</td>
      <td class="even-td-TableDetails diff-td-text-color">I</td>
      <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
    </tr>
    <tr id="row1" class="child">
      <td class="child-row-Table-Details"><strong>Departure</strong></td>
      <td class="even-td-TableDetails">06/06/2017 11:00</td>
      <td class="odd-td-TableDetails">-</td>
      <td class="even-td-TableDetails" colspan="9">&nbsp;-</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>

The result I want in array or variable:

Name1
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival

===============

Name2
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival

I know it sounds simple enough, but I am new to JavaScript so any examples/demos would be appreciated.

Note: There are no fixed values, Names keep changing and more rows are added.

Answer 1

You can select each row with class parent and then get the following two rows using jQuery's next() function. From the docs:

Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.

Also each HTML element should have a unique id. In your code you used the id row0 for 3 different elements which is just bad practice. If such cases are needed you should uses classes instead of ids.

The below snippet creates an array containing objects that hold the requested information. The extraction of these information depends on the order of the columns (specifically, I used the :nth-child() selector to get the desired cell). If the order of the columns will change over time, please consider adding descriptive classes to each cell and select based on these classes.

var entries = [];

$("#tablemain tr.parent").each(function(){
  var child1 = $(this).next();
  var child2 = child1.next();
  var cells = {
    name: $(this).find("td:nth-child(1)").text(),
    arrival1: child1.find("td:nth-child(2)").text(),
    departure: child2.find("td:nth-child(2)").text(),
    arrival2: child1.find("td:nth-child(3)").text()
  };

  entries.push(cells);

});

console.log(entries);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablemain" class="tableclass">
  <thead>
    <tr>
      <th>A</th>
      <th>Site1</th>
      <th>Site2</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>
      <th>K</th>
      <th style="width: 10%;">L</th>
      <th>M</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row0" class="parent">
      <td class="radioTableDetails awarded-td-background-color">Name1</td>
      <td colspan="11">&nbsp;</td>
      <td class="version-Link-Table even-td-TableDetails">&nbsp;</td>
    </tr>
    <tr id="row01" class="child">
      <td class="child-row-Table-Details"><strong>Arrival</strong></td>
      <td class="even-td-TableDetails">06/06/2017 09:30</td>
      <td class="odd-td-TableDetails">06/06/2017 16:00</td>
      <td class="even-td-TableDetails">A</td>
      <td class="odd-td-TableDetails">B</td>
      <td class="even-td-TableDetails">D</td>
      <td class="odd-td-TableDetails">E</td>
      <td class="even-td-TableDetails">&nbsp;</td>
      <td class="odd-td-TableDetails">F</td>
      <td class="even-td-TableDetails">G</td>
      <td class="odd-td-TableDetails">H</td>
      <td class="even-td-TableDetails diff-td-text-color">I</td>
      <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
    </tr>
    <tr id="row02" class="child">
      <td class="child-row-Table-Details"><strong>Departure</strong></td>
      <td class="even-td-TableDetails">06/06/2017 10:00</td>
      <td class="odd-td-TableDetails">-</td>
      <td class="even-td-TableDetails" colspan="9">-</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="row1" class="parent">
      <td class="radioTableDetails">Name2</td>
      <td colspan="11">&nbsp;</td>
      <td class="version-Link-Table even-td-TableDetails">&nbsp;</td>
    </tr>
    <tr id="row11" class="child">
      <td class="child-row-Table-Details"><strong>Arrival</strong></td>
      <td class="even-td-TableDetails">06/06/2017 10:30</td>
      <td class="odd-td-TableDetails">06/06/2017 17:00</td>
      <td class="even-td-TableDetails">A</td>
      <td class="odd-td-TableDetails">B</td>
      <td class="even-td-TableDetails">D</td>
      <td class="odd-td-TableDetails">E</td>
      <td class="even-td-TableDetails">&nbsp;</td>
      <td class="odd-td-TableDetails">F</td>
      <td class="even-td-TableDetails">G</td>
      <td class="odd-td-TableDetails">H</td>
      <td class="even-td-TableDetails diff-td-text-color">I</td>
      <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
    </tr>
    <tr id="row12" class="child">
      <td class="child-row-Table-Details"><strong>Departure</strong></td>
      <td class="even-td-TableDetails">06/06/2017 11:00</td>
      <td class="odd-td-TableDetails">-</td>
      <td class="even-td-TableDetails" colspan="9">&nbsp;-</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>