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

Question

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).

Answer 1

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>

Answer 2

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>