循环遍历表格并提取特定细胞

时间：2017-06-04 12:57:53

标签： javascript jquery html

我无法使用jQuery循环访问表格，然后提取特定单元格 我知道这可以通过.each来完成，我没有代码可以分享作为示例，但我正在努力，因为我们说，我只是在寻找一些建议。我将分享我能提出的任何代码。

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

代码段：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

名1
1.Site 1到达
2.Site 1离开
3.Site 2 Arrival

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

名称2
1.Site 1到达
2.Site 1离开
3.Site 2 Arrival

我知道这听起来很简单，但我是JavaScript的新手，所以任何示例/演示都会受到赞赏。


注意：没有固定值，名称不断更改，并添加了更多行。

1 个答案:

答案 0 :(得分：1)

您可以使用类parent选择每一行，然后使用jQuery＆＃39; next()函数获取以下两行。来自docs：

  

给定一个表示一组DOM元素的jQuery对象，.next()方法允许我们在DOM树中搜索这些元素的紧随其后的兄弟，并从匹配元素构造一个新的jQuery对象。 / p>

此外，每个HTML元素都应具有唯一ID。在您的代码中，您使用了row0标识3个不同的元素，这只是不好的做法。如果需要这样的情况，你应该使用类而不是id。

以下代码段创建一个包含保存所请求信息的对象的数组。这些信息的提取取决于列的顺序（具体来说，我使用:nth-child()选择器来获取所需的单元格）。如果列的顺序会随着时间的推移而改变，请考虑为每个单元格添加描述性类，并根据这些类进行选择。

＆＃13;
＆＃13; 
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);
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题