突出显示表格左下角的单元格（三角形）

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类添加到每个通过条件j <= i的单元格中（i是当前行的索引，j是当前列的索引。

由于生成的矩阵并不总是正方形（列数与行数不同），因此我们必须归一化x和y坐标，为此，我们只需将x坐标除以列数，将y坐标除以行数（这样，两个归一化坐标都可以从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>