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

Question

I have been working on changing the background color of individual cells within a column using a conditional statement like the example below, but I have not been able to successfully accomplish anything. I know it's probably setup incorrectly and I've never used JavaScript before.

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";
    }
};

Any and all help is welcome.

Answer 1

Ok after getting clarification see the first part of this answer example for insight, the second part for further learning.

First you'll just change the onclick to onload on the table element. Changed to onclick just for this example but onload will fire the method also once on your project. Go ahead and click the table in the example after hitting the "run snippet" button to see result.

First you need a reference to the table object to get the HTMLTableCollection which you'll then first loop the rows, and then the subsequent cells of each row. You grab the number value from innerHTML on each pass and use parseInt to get a number instead of a string which you can then compare via expressions in an if statement on each iteration as shown in the example. If a number is not passed, the try and catch blocks will alert you to error in the script for correction. Hope this helps and best of luck in your endeavor!

 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>

For the sake of learning, hopefully this helps further. Cheers

 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>