当单元格值大于特定值时按不同颜色突出显示html td

Question

我尝试更改td cell值为greater than 10时的行颜色，但是，当将鼠标悬停在Darksalmon颜色上时，所有行都变为高亮，当Red时没有行value is > 10。我做错了吗？

其他问题：我的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>

HTML：

<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或类似平台的一些基本教程。