Question

我正在尝试通过我的Chrome扩展程序从表格内部检索多个元素，以得出每一列的平均值（这是一个成绩表）。

该表如下所示：

Screenshot

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

我需要从每个单元格中获取的元素是：

DIV的innerHTML（在本例中为“ 4”，即等级）。
标题字符串的最后一个字符（在本例中为“ 1,5”，是成绩的权重）。

如上所述，我需要获取每一列的平均值，最好使用“ KarakterVægt：1,5”作为其“等级重量”的百分比。

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

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

我对使用JavaScript编写脚本还很陌生，因此我还有很多东西要学习。：）

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

Answer 1

似乎您实际上需要针对单元格内的<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]);
}

但是实际上，我会将您的代码分为两部分。

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

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

Answer 2

完整的工作脚本： https://pastebin.com/25V4P12A

    /**
 * @Author: Toke Raabjerg <TokeDK>
 * @Date:   29-Aug-2018
 * @Email:  *
 * @Project: *
 * @Last modified by:   TokeDK
 * @Last modified time: 09-Sep-2018
 */
/*----------------------------------------------------------------*/
//                             CHECKS                             //
/*----------------------------------------------------------------*/

chrome.storage.local.get([
  'Lectio_gradeAverage'
], function (result) {
  if (result.Lectio_gradeAverage == true || result.Lectio_gradeAverage == undefined) {

      run();

      } else {
          var targetx = document.getElementsByTagName('tbody')[0];
          var trx = document.createElement('tr');
          trx.style = "text-align:center; font-weight:600;";
          trx.id = "average";
          trx.innerHTML = "<tr><td>Husk du kan benytte gennemsnitsberegneren! Aktiver under indstillinger.</td>";
          targetx.appendChild(trx);
    }
  }
);

/*----------------------------------------------------------------*/
//                         DATA STRUCTURE                         //
/*----------------------------------------------------------------*/

function run () {
var times2 = 0; var times3 = 0; var times4 = 0; var times5 = 0; var times6 = 0;
var calcAverage2 = 0; var calcAverage3 = 0; var calcAverage4 = 0; var calcAverage5 = 0; var calcAverage6 = 0;
var tables = 0;

function calculateData (tr, div) {
  var grade = div.textContent;
  var title = div.title;
  var weightStr = title.split(":").pop();
  var weight = parseFloat(weightStr.replace(',','.').replace(' ',''));
  var average = grade * weight;

  if (tr == 2) {
    times2 = times2 + 1;
    calcAverage2 = calcAverage2 + average;
  }
      if (tr == 3) {
        times3 = times3 + 1;
        calcAverage3 = calcAverage3 + average;
      }
          if (tr == 4) {
            times4 = times4 + 1;
            calcAverage4 = calcAverage4 + average;
          }
              if (tr == 5) {
                times5 = times5 + 1;
                calcAverage5 = calcAverage5 + average;
              }
                  if (tr == 6) {
                    times6 = times6 + 1;
                    calcAverage6 = calcAverage6 + average;
                  }
}

/*----------------------------------------------------------------*/
//                               LOOP                             //
/*----------------------------------------------------------------*/

  document.getElementsByTagName("tbody")[0].id = "karakter_tabel";

  var getChildren = document.getElementById('karakter_tabel').childElementCount;
  var GetinnerHTML = document.getElementById('karakter_tabel');
  countChildren = getChildren - 1;

  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 inner = GetinnerHTML.rows[i].cells[tr];
            div = inner.querySelector('div');
            if (div != null) {calculateData (tr, div);}
          //}
    }
  }


/*----------------------------------------------------------------*/
//                     DOM & DATA STRUCTURE                       //
/*----------------------------------------------------------------*/

  if (countChildren > 2) {
    var target = document.getElementById('karakter_tabel');
      var trd = document.createElement('tr');
      trd.style = "text-align:center; font-weight:600;";
      trd.id = "average";
      trd.innerHTML = "<tr><td></td><td>Gennemsnit (Er dette forkert? <a href='#' target='_blank'>Klik her</a>)</td>";//<td><div>" + average2 + "</div></td><td><div>" + average3 + "</td></div><td><div>" + average4 +"</div></td><td><div>" + average5 + "</td></div></tr>";
      target.appendChild(trd);


    var averagex2 = calcAverage2 / times2; if(isNaN(averagex2)) {averagex2 = 0;}  else {
      var average2 = averagex2.toFixed(2);
      var two = document.createElement('td'); two.innerHTML = "<div>"+ average2 + "</div>";
      document.getElementById('average').appendChild(two);
    }

    var averagex3 = calcAverage3 / times3; if(isNaN(averagex3)) {averagex3 = 0;}  else {
      var average3 = averagex3.toFixed(2);
      var three = document.createElement('td'); three.innerHTML = "<div>"+ average3 + "</div>";
      document.getElementById('average').appendChild(three);
    }

    var averagex4 = calcAverage4 / times4; if(isNaN(averagex4)) {averagex4 = 0;}  else {
      var average4 = averagex4.toFixed(2);
      var four = document.createElement('td'); four.innerHTML = "<div>"+ average4 + "</div>";
      document.getElementById('average').appendChild(four);
    }

    var averagex5 = calcAverage5 / times5; if(isNaN(averagex5)) {averagex5 = 0;}  else {
      var average5 = averagex5.toFixed(2);
      var five = document.createElement('td'); five.innerHTML = "<div>"+ average5 + "</div>";
      document.getElementById('average').appendChild(five);
    }

    var averagex6 = calcAverage6 / times6; if(isNaN(averagex6)) {averagex6 = 0;} else {
      var average6 = averagex6.toFixed(2);
      var six = document.createElement('td'); six.innerHTML = "<div>"+ average6 + "</div>";
      document.getElementById('average').appendChild(six);
    }
  }
}

DOM Javascript-获取单元格内容

2 个答案: