突出顯示表格左下半部分的單元格（三角形）

Question

我有一個 html 表，它是根據提供的行數和列數動態創建的。 我已經成功創建了表格，現在我想用淺紅色突出顯示表格左下半部分（三角形）的單元格。 同附件https://www.screencast.com/t/Va4Xz4v4

我用於創建表格的代碼

 //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>

現在我只想突出顯示表格的下半邊（三角形）。

Answer 1

我的解決方案使用將圖表的兩半一分為二的線的斜率，然后通過這個斜率增加單元格的數量以着色。

var slope = _tblCols/_tblRows

演示：

 //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

基本上，您必須比較單元格的x和y坐標。 對於方陣，單元格的左下角三角形匹配條件x <= y ，左上角匹配y <= numberOfColumns - x ，依此類推...

因此，要突出顯示左下方的單元格，只需將triangle class 添加到每個通過條件j <= i的單元格（ i是當前行的索引， j是當前列的索引）。

由於生成的矩陣並不總是一個平方（列數與行數不同），我們必須標准化x和y坐標，為此我們只需將x坐標除以列數和y坐標由行數（這樣兩個歸一化坐標都可以 go 從0到1 ）。 因此，我們突出顯示匹配條件j / (_tblCols - 1) <= i / (_tblRows - 1)的單元格（從列數和行數中減去 1 以說明索引i和j從0開始的事實） .

在內循環內添加：

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

演示：

 //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>