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

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.Site 1抵达
2.Site 1出发
3.Site 2到达

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

名称2
1.Site 1抵达
2.Site 1出发
3 .Site 2抵达

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

注：没有固定值，名称不断变化，并添加更多的行。

Answer 1

您可以选择每行parent，然后使用jQuery的next()函数获取以下两行。从docs：

如果提供的jQuery代表了一组DOM元素，该.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>