Javascript 当单元格值大于特定值时，按不同颜色高亮显示html td

当td单元格值大于10时，我会尝试更改行颜色，但当鼠标悬停在深色上时，所有行都会变为高亮，当值大于10时，所有行都不会变为红色。我做错了什么

附加问题：我的html表有5列，我不希望最后一列是高位的。如何排除该列

CSS:

JS:

Html:

---

有很多错误：

HTML:

您应该关闭表标记。 不要为表行和表单元格提供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:

---

我希望这对您足够详细，否则我建议您阅读w3schools或类似平台上的一些基本教程。

我正确地附上了表格，只是复制/过去的打字错误，稍后我会检查。为什么不给你提到的东西提供身份证呢？我我见过很多堆栈asnwer向tr/table/td提供id。你能进一步解释吗？id应该是唯一的。那就给他们上课吧。如果您有超过100行，您想为每一行编写seperate代码吗？

<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>

<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>

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