html – Javascript desk row/cell background shading displaying otherwise between Win10 and IOS

Morning all. First let me say I’m not an internet man, however Python. Really, not likely a Python man, only a graphics man who makes use of Python.

However I’ve a Python-based automation stack that makes use of a QT GUI – that works accurately. I then have been constructing an internet front-end for to imitate the GUI. It has been going gradual however certain. The webpage is functioning accurately and now I’m including the ending touches.

I’ve JavaScript to shade the background of cells utilizing a gradient based mostly on the contents to make progress bars. As you’ll be able to see within the code beneath, the “Slaves-Desk” is simply shading particular person cells based mostly on their content material and works accurately as desired.

The difficulty is below the “Jobs-Desk” IF. There I need to shade all the row based mostly on the worth of a cell. In Win10 (all browsers) this works as desired and all the row is certainly shaded. However, in IOS (each iPhone and iPad -any browser) this precisely similar code is shading every particular person cell, so there are 10 separate “progress bar’s” all through the row. And this is similar with all of the rows. All the pieces else on the web page shows accurately on IOS, together with the person cells within the “Slaves-Desk”.

So the query is, does anyone see a difficulty that may make IOS not just like the code?

Thanks prematurely,

JBreckeen.

tableHeader.innerHTML = "";                                                         //  CLEAR TABLE
tableBody.innerHTML = '';

for (var i = 0; i < information[0].size; i++) {                                          //  HEADER
  var cell = doc.createElement('th');
  cell.innerHTML = information[0][i];
  tableHeader.appendChild(cell);
  }


  for (var i = 1; i < information.size; i++) {                                           //  INSERT ROWS
    var dataRow = tableBody.insertRow(-1); 
    for (var j = 0; j < information[i].size; j++) {
      var cell = dataRow.insertCell(j);
      cell.innerHTML = information[i][j];

      if (tableId == "Jobs-Desk") {                                                  //  *** JOBS-TABLE
        if ((j == 2) && information[i][j].contains("%")) {                                   //  PROG BAR on Row
          var % = parseFloat(information[i][j].cut up("%")[0]);
          dataRow.model.background = `linear-gradient(90deg, rgba(75, 75, 75, .3) ${%}%, clear ${%}%)`;          //  NOT WORKING ON IOS
          }
        }

      if (tableId == "Slaves-Desk") {                                                  //  *** SLAVES-TABLE
        if (j == 4 && /^[0-9]+$/.check(information[i][j]) && parseInt(information[i][j]) > 0) {        //  COLOR WARNINGS
          var model = getComputedStyle(doc.documentElement);
          var textColor = model.getPropertyValue('--text-color');
          cell.model.shade = textColor;
          } 
        if ((j == 5 || j == 6) && information[i][j].contains("%")) {                           //  PROG BAR ON RAM and GPU
          var % = parseFloat(information[i][j].cut up("%")[0]);
          var shade = % <= 75 ? 'inexperienced' : % <= 90 ? 'yellow' : 'pink';
          var model = getComputedStyle(doc.documentElement);
          var progressColor = model.getPropertyValue('--progress-' + shade + '-color');
          cell.model.setProperty('--progress-color', progressColor);
          cell.classList.add("progress-cell");
          cell.model.background = `linear-gradient(90deg, var(--progress-color) ${%}%, clear ${%}%)`;
          }


                                                                                //  TODO TASK STATUS

        }