當單元格值大於特定值時，以不同的顏色突出顯示 html td

Question

當它的td cell值greater than 10 ，我嘗試更改行顏色，但目前當懸停在Darksalmon顏色上時所有行都變為突出顯示，而當value is > 10時沒有Red 。 我在做什么錯？

附加問題：我的 html 表有 5 列，我不想高亮顯示最后一列。 如何排除這樣的列？

CSS：

<style type="text/css">
    tr {
        background: #fff;
    }

        tr:hover {
            background: darksalmon;
        }
</style>

JS：

<script type="text/javascript">
    function Highlight(row) {
        if(document.getElementById("price").value > 10)
        {
            document.getElementById(row).style.background = 'Red';
        }
        else
        {
            document.getElementById(row).removeAttribute("style");
            document.getElementById(row).onMouseOver = function () { this.className = "hover"; }
        }
    }
</script>

網址：

<table>
      <tr id="row1" onmouseover="javascript:Highlight('row1');">
          <td id="price"></td>
      </tr>
<table>

Answer 1

有很多不對的地方：

HTML：

您應該關閉表格標簽</table> 。 不要給你的表格行和表格單元格一個 id。 例如，給您的表格主體或表格一個想法：

<table>
    <thead>
    <tr>
        <th>Price</th>
    </tr>
    </thead>
    <tbody id="tbody">
    <tr>
        <td>2</td>
        <td>3</td>
        <td>11</td>
        <td>13</td>
        <td>5</td>
    </tr>
    </tbody>
</table>

JS：

const tableBody = document.getElementById("tbody"); // get your table body or table if you don't want a table body
    const rows = tableBody.getElementsByTagName("tr"); // get all your table rows inside your table body

    // loop through all your tr elements
    for (let i = 0; i < rows.length; i++) {
        // here it is probably best to get the td element but because there is only one column there is no need for this.
        // if there are more then 1 columns get the td element like this  const td = rows[i].firstElementChild; if it is
        // the first otherwise give them a class and get them with getElementsByClassName[0] on the rows[i]

        // try to parse the innerText of the td or tr element to an integer (Number) because if there is text this will throw an exception

        try {
            // if price > 10 make background color of row red otherwise darkSalmon

            if (parseInt(rows[i].innerText) > 10) {
                rows[i].style.backgroundColor = "red";
            }
            else {
                rows[i].style.backgroundColor = "darksalmon";
            }
        }
        catch (e) {
            console.error(e);
        }

        //if you want to do this on mousover you can add event listeners per row
        rows[i].addEventListener("mouseover", () => {
            try {
                // if price > 10 make background color of row red otherwise darkSalmon

                if (parseInt(rows[i].innerText) > 10) {
                    rows[i].style.backgroundColor = "red";
                }
                else {
                    rows[i].style.backgroundColor = "darksalmon";
                }
            }
            catch (e) {
                console.error(e);
            }
        });

        //if you want to set the background color back on default when your mouse leaves the tr do this
        rows[i].addEventListener("mouseleave", () => {
            rows[i].style.backgroundColor = null;
        });
    }

我希望這對您來說足夠詳細，否則我建議您閱讀有關 w3schools 或類似平台的一些基本教程。