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

确定后，确定，请参阅此答案示例的第一部分，以供深入了解，第二部分，用于进一步的学习。

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

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

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>

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

1 个答案: