时间戳

首页 > 解决方案 > DOM Javascript - 获取单元格内容

javascript - DOM Javascript - 获取单元格内容

问题描述

我正在尝试通过我的 Chrome 扩展从表中检索多个元素，以对每一列进行平均（这是一个成绩单）。

该表如下所示：

截屏

我的 JavaScript 脚本循环当前是：

var countChildren = document.getElementById('karakter_tabel').childElementCount;
for (var i = 0; i < countChildren; i++) {
  if (i != 0) {
    var countTRchildren = document.getElementById('karakter_tabel').getElementsByTagName('tr')[i].childElementCount;
    for (var tr = 0; tr < countTRchildren; tr++) {
      var x = GetinnerHTML.rows[i].cells[tr];
      console.log(x);
    }
  }
}

它返回（对于每个单元格）：

<td class="textCenter">
   <div class="textCenter" 
   title="XPRSFag: 4831B Samtidshistorie Kilde: Karakter Vægt: 1,5">
   4
   </div>
</td>

我需要的每个单元格的元素是：

如前所述，我需要获得每列的平均值，最好使用“Karakter Vægt：1,5”，因为它是“等级重量”的百分比。

所以我需要内部循环返回：

x = ["4", "1,5"];

我对用 JavaScript 编写脚本还很陌生，所以我还有很多东西要学。:)

感谢您抽出宝贵时间阅读本文，我愿意接受任何建议，如果我能以任何方式更准确，请告诉我...

标签： javascripthtmlloopsdom

解决方案

看来您实际上需要<div>在单元格内定位；查询其文本内容和标题值。一种可能的方式：

for (var tdi = 0; tdi < countTRchildren; tdi++) {
  var td = GetinnerHTML.rows[i].cells[tdi];
  var div = td.querySelector('div');
  var textContent = div.textContent;
  var title = div.getAttribute('title');
  var no = title.match(/([0-9,.]+$)/);

  // there should be a collecting code instead
  console.log(title.trim(), no && no[0]);
}

但实际上，我会将您的代码重新组织为两个部分。

第一个应该只关心收集单元元素并将它们组织成某种数据结构。例如，所有的单元格内部似乎都有div.textContent选择器 - 因此可以通过一个简单的querySelectorAll调用来收集它们。

第二个应该只关心从给定单元格中检索信息。理想情况下，它应该是一个接收单元格作为参数的函数，并返回一个包含必填字段的对象。

推荐阅读