Highlight the cells on the left lower half of the table(triangle)

user_13772115 0
Viewed 78

i have an html table that is created dynamically based on provided number of rows & columns. I have successfully created the table now i want to highlight the cells on the left lower half of the table(triangle) with light red color. Same as in the attached file https://www.screencast.com/t/Va4Xz4v4

The code i used for creating the table

//Event handler function
function print_table() {
  let _tblRows, _tblCols, tblElm, rowElm, colElm, randNmbrArray, _tblDiv, _randNmbrAvg, avgElm;

  _tblRows = document.getElementById('rows').value;
  _tblCols = document.getElementById('cols').value;
  randNmbrArray = [];
  _tblDiv = document.getElementById('my_table')
  avgElm = document.getElementById('average');

  if (_tblRows == "") {
    alert("Please enter rows!");
  } else if (_tblCols == "") {
    alert("Please enter columns!");
  } else {
    tblElm = document.createElement('table');

    for (var i = 0; i < _tblRows; i++) {
      rowElm = document.createElement('tr');
      for (var j = 0; j < _tblCols; j++) {
        let _randNmbr = Math.floor(Math.random() * 100) + 1;
        randNmbrArray.push(_randNmbr);
        colElm = document.createElement('td');
        colElm.appendChild(document.createTextNode(_randNmbr));
        rowElm.appendChild(colElm);

      }
      tblElm.appendChild(rowElm);
    }
    _tblDiv.innerHTML = "";
    _tblDiv.append(tblElm);

    _randNmbrAvg = GetAverage(randNmbrArray);
    avgElm.innerHTML = "";
    avgElm.append(`The average of the number in the table is ${_randNmbrAvg.toFixed(2)}`);

  }
}

function GetAverage(numberArray) {
  let total = 0;
  for (var i = 0; i < numberArray.length; i++) {
    total += numberArray[i];
  }
  return total / numberArray.length;
}
table {
  border-collapse: collapse;
  margin: auto 25px auto 25px;
}

table, td, th {
  border: 1px solid #70AEC5;
}

td {
  padding: 3px;
}

th {
  border: 1px solid white;
  background-color: #70AEC5;
  color: white;
  text-align: center;
  padding: 4px 0 4px 0;
}

tr:hover {
  background: #ddd
}

h1 {
  color: #70AEC5;
}

#directions {
  border-radius: 25px;
  border: 2px solid #70AEC5;
  padding: 10px;
  margin: 10px 25px 15px 25px;
}

button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 20px;
  cursor: pointer;
  border-radius: 8px;
}

.triangle {
  background-color: #ffcccc;
}
<h1>Generating a Table</h1>
<h4>By Yukong Zhang</h4>
Rows: <input id="rows" type="text" size="3" value="15"> Columns: <input id="cols" type="text" size="3" value="15">
<button id="print" type="button" onclick="print_table()">Generate</button><br>
<div id="my_table"></div>
<h4 id="average"></h4>

Now i only wants to highlight the lower half side of the table(triangle).

css html jquery javascript
2 Answers

My solution uses the slope of the line that would bisect the two halves of the chart and then increments the count of cells to color by this slope.

var slope = _tblCols/_tblRows

Demo: 

//Event handler function
function print_table() {

    let _tblRows, _tblCols, tblElm, rowElm, colElm,randNmbrArray,_tblDiv,_randNmbrAvg,avgElm;

    _tblRows = document.getElementById('rows').value;
    _tblCols = document.getElementById('cols').value;
    randNmbrArray = [];
    _tblDiv = document.getElementById('my_table')
    avgElm = document.getElementById('average');

    if (_tblRows == "") {
        alert("Please enter rows!");
    } 
    else if(_tblCols == ""){
        alert("Please enter columns!");
    }
    else {
        tblElm = document.createElement('table');
        var coloredCells = 1
        var slope = _tblCols/_tblRows //Get the slope
        for (var i = 0; i < _tblRows; i++) {
    
          
            rowElm = document.createElement('tr');
            for (var j = 0; j < _tblCols; j++) {
                let _randNmbr = Math.floor(Math.random() * 100) + 1;
                randNmbrArray.push(_randNmbr);
                colElm = document.createElement('td');
              if(j < coloredCells){
                colElm.classList.add("triangle")
              }
                colElm.appendChild(document.createTextNode(_randNmbr));
                rowElm.appendChild(colElm);

            }
            coloredCells+= slope; //Increment by the slope
            tblElm.appendChild(rowElm);
          
        }
        _tblDiv.innerHTML="";
        _tblDiv.append(tblElm);

        _randNmbrAvg = GetAverage(randNmbrArray);
        avgElm.innerHTML = "";
        avgElm.append(`The average of the number in the table is ${_randNmbrAvg.toFixed(2)}`);

    }
}

function GetAverage(numberArray){
let total = 0;
for(var i = 0; i < numberArray.length; i++) {
    total += numberArray[i];
}
return total / numberArray.length;
}
table {
    border-collapse: collapse;
    margin: auto 25px auto 25px;
}

table, td, th {
    border: 1px solid #70AEC5;
}
td
{
    padding: 3px;
}

th {
     border: 1px solid white;
     background-color: #70AEC5;
     color: white;
     text-align: center;
     padding: 4px 0 4px 0;
 }

tr:hover{background: #ddd}

h1{
    color: #70AEC5;
}

#directions {
    border-radius: 25px;
    border: 2px solid #70AEC5;
    padding: 10px; 
    margin: 10px 25px 15px 25px;
}

button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 20px;
    cursor: pointer;
    border-radius: 8px;
}

.triangle
{
   background-color:#ffcccc;
}
<h1>Generating a Table</h1>
<h4>By Yukong Zhang</h4>
Rows: <input id="rows" type="text" size="3" value="15">
Columns: <input id="cols" type="text" size="3" value="15">
<button id="print" type="button" onclick="print_table()">Generate</button><br>
<div id="my_table"></div>
<h4 id="average"></h4>

user_45304930

Basically, you have to compare the x and y coordinates of the cell. For a square matrix, the lower left triangle of cells matches the condition x <= y, the top left matches y <= numberOfColumns - x, and so on ...

So to highlight the lower left cells just add the triangle class to every cell that passes the condition j <= i (i is the index of the current row and j is the index of the current column).

Since the generated matrix is not always a square one (the number of columns is different than the number of rows), we have to normalize the x and y coordinates, to do so we just divide the x coordinate by the number of columns and the y coordinate by the number of rows (that way both normalized coordinates can go from 0 to 1). So we highlight the cells that match the condition j / (_tblCols - 1) <= i / (_tblRows - 1) (subtracting 1 from both number of columns and rows to account for the fact that the indexes i and j start at 0).

Inside the inner loop add:

if(j / (_tblCols - 1) <= i / (_tblRows - 1)) {
    colElm.className = "triangle";
}

Demo:

//Event handler function
function print_table() {
  let _tblRows, _tblCols, tblElm, rowElm, colElm, randNmbrArray, _tblDiv, _randNmbrAvg, avgElm;

  _tblRows = document.getElementById('rows').value;
  _tblCols = document.getElementById('cols').value;
  randNmbrArray = [];
  _tblDiv = document.getElementById('my_table')
  avgElm = document.getElementById('average');

  if (_tblRows == "") {
    alert("Please enter rows!");
  } else if (_tblCols == "") {
    alert("Please enter columns!");
  } else {
    tblElm = document.createElement('table');

    for (var i = 0; i < _tblRows; i++) {
      rowElm = document.createElement('tr');
      for (var j = 0; j < _tblCols; j++) {
        let _randNmbr = Math.floor(Math.random() * 100) + 1;
        randNmbrArray.push(_randNmbr);
        colElm = document.createElement('td');
        colElm.appendChild(document.createTextNode(_randNmbr));
        rowElm.appendChild(colElm);

        if(j / (_tblCols - 1) <= i / (_tblRows - 1)) {
          colElm.className = "triangle";
        }
      }
      tblElm.appendChild(rowElm);
    }
    _tblDiv.innerHTML = "";
    _tblDiv.append(tblElm);

    _randNmbrAvg = GetAverage(randNmbrArray);
    avgElm.innerHTML = "";
    avgElm.append(`The average of the number in the table is ${_randNmbrAvg.toFixed(2)}`);

  }
}

function GetAverage(numberArray) {
  let total = 0;
  for (var i = 0; i < numberArray.length; i++) {
    total += numberArray[i];
  }
  return total / numberArray.length;
}
table {
  border-collapse: collapse;
  margin: auto 25px auto 25px;
}

table, td, th {
  border: 1px solid #70AEC5;
}

td {
  padding: 3px;
}

th {
  border: 1px solid white;
  background-color: #70AEC5;
  color: white;
  text-align: center;
  padding: 4px 0 4px 0;
}

tr:hover {
  background: #ddd
}

h1 {
  color: #70AEC5;
}

#directions {
  border-radius: 25px;
  border: 2px solid #70AEC5;
  padding: 10px;
  margin: 10px 25px 15px 25px;
}

button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 20px;
  cursor: pointer;
  border-radius: 8px;
}

.triangle {
  background-color: #ffcccc;
}
<h1>Generating a Table</h1>
<h4>By Yukong Zhang</h4>
Rows: <input id="rows" type="text" size="3" value="15"> Columns: <input id="cols" type="text" size="3" value="15">
<button id="print" type="button" onclick="print_table()">Generate</button><br>
<div id="my_table"></div>
<h4 id="average"></h4>

user_98674510
Related