javascript - 如何更改条件语句下单元格的颜色？

Question

我一直致力于使用如下例所示的条件语句来更改列中各个单元格的背景颜色，但我未能成功完成任何事情。我知道它可能设置不正确，而且我以前从未使用过 JavaScript。

document.getElementById("Table").onload = function();

Table.rows[1].cells[4].onload = function() {    
    let tableCell = var
    if (tableCell > 92) {
        document.body.style.backgroundColor = "green";
    } else if ( tableCell > 90) {
        document.body.style.backgroundColor = "orange";
    } else {
        document.body.style.backgroundColor = "red";
    }
};

欢迎任何及所有帮助。

Answer 1

好的，在得到澄清后，请参阅此答案示例的第一部分以获取见解，第二部分以进一步学习。

首先，您只需将表格元素上的 onclick 更改为 onload 即可。仅针对此示例更改为 onclick，但 onload 也会在您的项目上触发该方法一次。点击“运行片段”按钮后，继续单击示例中的表格以查看结果。

首先，您需要引用表对象来获取 HTMLTableCollection然后，您将首先循环行，然后循环每行的后续单元格。您可以在每次传递时从 innerHTML 获取数字值，并使用 parseInt 获取数字而不是字符串，然后您可以在每次迭代时通过 if 语句中的表达式进行比较，如下所示如示例所示。如果未传递数字，try 和 catch block 将警告您脚本中的错误以进行更正。希望这对您有所帮助，并祝您好运!

parseCells = (theTable) => {
  // First loop the table rows.
  for(let r = 0, l = theTable.rows.length; r < l; r++) {
    // Second loop the rows column cells.
    for(let c = 0, e = theTable.rows[r].cells.length; c < e; c++) {
     try {
      // Giving a random number between for innerHTML 0-100 before referencing the cell in a variable for example.
      theTable.rows[r].cells[c].innerHTML = Math.floor(Math.random() * 101);
      // Get the contents and convert to number from string and set the current cell.      
      let currentCellNumber = parseInt(theTable.rows[r].cells[c].innerHTML),
                currentCell = theTable.rows[r].cells[c];
      // If the contents are numbers and can be parsed via expression then change colors.
        if (currentCellNumber > 92) {
          currentCell.style.backgroundColor = 'green';
        } else if (currentCellNumber > 90) {
          currentCell.style.backgroundColor = 'orange';
        } else {
          currentCell.style.backgroundColor = 'red';
        }
      }
      // If there was error like cell contents aren't actually numbers, or table wasn't found etc, then alert via try/catch.
      catch {
        alert('Something is wrong with the input, are you sure your table cells only have numbers?')
        }
    }
  }
}

td {
  width: 5rem;
  height: 5rem;
  text-align: center;
  vertical-align: middle;
  border: gray 1px solid;
  transition: background-color .35s ease;
}

<strong>Click repeatedly to watch the value/color changes</strong>
<table onclick="parseCells(this)">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

为了学习，希望这对进一步有所帮助。干杯

const tablex = document.getElementById('theTable'),
     clicked = document.getElementById('coordinates');

randomColor = () => {
  return '#'+(Math.random()*0xFFFFFF<<0).toString(16);
}

colorMe = (that) => {
  that.style.backgroundColor = randomColor();
  clicked.innerHTML = that.parentNode.rowIndex + '/' + that.cellIndex;
}

colorCell = () => {
  
  try {
  const xInput = document.getElementById('theX'),
        yInput = document.getElementById('theY'),
        theCell = tablex.rows[xInput.value].cells[yInput.value];
        
    theCell.style.backgroundColor = randomColor();
    clicked.innerHTML = xInput.value + '/' + yInput.value;
    
  } catch {
    alert('Check your x/y buddy, there are not that many cells... 0 - 2');
  }
  
}

td {
  height: 5rem;
  width: 5rem;
  border: gray 1px dotted;
  cursor: pointer;
  pointer-events: all;
}

<strong>Click a box, or define one specifically below : <br/>
Most recently colored cell X/Y coordinates:  <span id="coordinates" style="color:blue;font-size:130%"></span><br/>
<strong>Or a specific cell at a time;</strong><br/>
x: <input id="theX" type="number" maxlength="1">
y: <input id="theY" type="number" maxlength="1">
<button type="button" onclick="colorCell()">Color it</button>
<br/>

<table id="theTable">
  <tr>
    <td onclick="colorMe(this)"></td>
    <td onclick="colorMe(this)"></td>
    <td onclick="colorMe(this)"></td>
  </tr>
  <tr>
    <td onclick="colorMe(this)"></td>
    <td onclick="colorMe(this)"></td>
    <td onclick="colorMe(this)"></td>
  </tr>
  <tr>
    <td onclick="colorMe(this)"></td>
    <td onclick="colorMe(this)"></td>
    <td onclick="colorMe(this)"></td>
  </tr>
</table>