循环通过表并提取细胞

Question

我很难使用jQuery循环循环，然后提取细胞。
我知道这可以用.each来完成，我没有代码可以共享，但是我正在尝试说话，我只是在寻找一些建议。我将分享我可以提出的任何代码。

实现这一目标的最佳方法是什么？

代码段：

<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>

我想要在数组或变量中想要的结果：

name1
1.站点1到达
2.站1离开
3.站2到达

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

name2
1.站点1到达
2.站1离开
3.站2到达

我知道这听起来很简单，但是我是JavaScript的新手，因此所有示例/演示都将不胜感激。

注意：没有固定值，名称继续更改并添加更多行。

Answer 1

您可以使用类parent选择每一行，然后使用jQuery的next()函数获取以下两个行。从文档中：

给定一个代表一组DOM元素的jQuery对象，.next()方法使我们能够在DOM树中立即搜索这些元素后的这些元素，并从匹配的元素中构造一个新的jQuery对象。

每个HTML元素也应具有唯一的ID。在您的代码中，您将ID row0用于3种不同的元素，这只是不良练习。如果需要这样的情况，则应使用类而不是ID。

以下摘要创建一个包含保存请求信息的对象的数组。这些信息的提取取决于列的顺序(具体来说，我使用:nth-child()选择器来获取所需的单元格(。如果列的顺序会随时间变化，请考虑在每个单元格中添加描述性类，然后根据这些类选择。

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>