javascript - 循环遍历表格并提取特定单元格

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>

我想要的数组或变量结果:

名称1
1.站点1到达
2.站点1出发
3.站点2到达

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

名称2
1.站点1到达
2.站点1出发
3.站点2到达

我知道这听起来很简单，但我对 JavaScript 很陌生，所以任何示例/演示将不胜感激。

注意:没有固定值，名称不断变化，并且会添加更多行。

Answer 1

您可以使用 parent 类选择每一行，然后使用 jQuery 的 next() 函数获取以下两行。来自 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.

此外，每个 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>