DOM Javascript - getting cell content

Question

I'm attempting to retrieve multiple elements from inside a table through my Chrome Extension, to make an average for each column (it's a grade sheet).

The table looks like this:

My JavaScript script loop is currently:

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);
    }
  }
}

It returns (for each cell):

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

The elements I need from each cell is:

• The innerHTML of DIV (In this case "4", which is the grade).
• The last character of the title's string (In this case "1,5" which is the grade weight).

As mentioned, I need to get an average for each column, preferably with the "Karakter Vægt: 1,5" as it's "Grade weight" in %.

So I need the inner loop to return:

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

I am fairly new to scripting in JavaScript, so I still have a lot to learn. :)

Thanks for taking your time to read this, I'm open to any suggestions, and if I can be more accurate in any way, let me know...

Answer 1

It seems that you actually need to target <div> inside the cell; query its text content and title value. One possible way:

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]);
}

But actually, I'd reorganize your code into two sections.

The first one should only bother about collecting cell elements and organizing them in some kind of data structure. For example, all the cell innards seem to have div.textContent selector - so they can be collected with one simple querySelectorAll call.

The second one should only bother about retrieving the information from the given cell. Ideally, it should be a function receiving a cell as an argument, and returning an object with required fields.

Answer 2

Fully working script: 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);
    }
  }
}