DOM Javascript - получение содержимого ячейки

Question

Я пытаюсь получить несколько элементов из таблицы через расширение 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>

Элементы, которые мне нужны из каждой ячейки:

• innerHTML DIV (в данном случае «4», что является оценкой).
• Последний символ строки заголовка (в данном случае «1,5» - это вес оценки).

Как уже упоминалось, мне нужно получить среднее значение для каждого столбца, предпочтительно с "Karakter Vægt: 1,5", так как это "вес сорта" в%.

Так что мне нужен внутренний цикл для возврата:

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

Я довольно новичок в написании сценариев на JavaScript, поэтому мне еще многое предстоит узнать. :)

Спасибо, что нашли время прочитать это, я открыт для любых предложений, и если я могу быть более точным, дайте мне знать ...

Answer 1

Полностью рабочий скрипт: 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);
    }
  }
}

Answer 2

Кажется, что вам действительно нужно нацелиться на <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.

Второй должен беспокоиться только о получении информации из данной ячейки. В идеале это должна быть функция, получающая ячейку в качестве аргумента и возвращающая объект с обязательными полями.