html - 将颜色更改为 HTML 输入值

Question

如您所见，我的网页上有很多输入字段

当我编辑（例如）GP1的分数时，使用一个onchange事件，彼此的分数会自动更新。我希望当这些结果更新时，TOTAL 行中的 2 个输入的颜色会发生变化。

在这种情况下，“13”应该是红色，“15”应该是绿色。

我想使用一些 CSS 代码，但我不知道如何将它与onchange事件一起使用。有什么建议吗？

这是代码：

<td valign="bottom" width="110px">
<p align="center"><b>Home Clan</b></p>
</td>
<td valign="bottom" width="110px">
<p align="center"><b>Opponent Clan</b></p>
</td>
<td valign="bottom" width="110px">
<p align="center"><b> + / -  </b></p>
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<p align="center"><b>GP1</b></p>
</td>
<td width="110px">
<p align="center"><input id="h1" type="text" name="h1" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input id="o1" type="text" name="o1" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input readonly id="diff1" type="text" name="diff1" style="width:70px"></p>
</td>
<td>
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<p align="center"><b>GP2</b></p>
</td>
<td width="110px">
<p align="center"><input id="h2" type="text" name="h2" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input id="o2" type="text" name="o2" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input readonly  id="diff2" type="text" name="diff2" style="width:70px"></p>
</td>
<td>
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<p align="center"><b>GP3</b></p>
</td>
<td width="110px">
<p align="center"><input id="h3" type="text" name="h3" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input id="o3" type="text" name="o3" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input readonly  id="diff3" type="text" name="diff3" style="width:70px"></p>
</td>
<td>
</td>
</tr>
<tr>
<td height="13px">
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<b>TOTAL</b>
</td>
<td width="110px">
<p align="center"><input readonly  id="htot" type="text" name="htot" style="width:70px"></p>
</td>
<td width="110px">
<p align="center"><input readonly id="otot" type="text" name="otot" style="width:70px"></p>
</td>
<td width="110px">
<p align="center"><input readonly id="difftot" type="text" name="difftot" style="width:70px"></p>
</td>
<td>
</td>
</tr>
</table>

Answer 1

你的问题不是很清楚，但我认为你想用红色涂上较低的分数，用绿色涂上最高的分数。

您像这样定义一个函数，它将在您的onChange事件中调用。

function color()
{

    htot = document.getElementById('htot');
    otot = document.getElementById('otot');

    if ( htot.value < otot.value ) {
        htot.style.color = 'red';
        otot.style.color = 'green'; } else {
        otot.style.color = 'red';
        htot.style.color = 'green'; }
}

例如，您可以在函数末尾调用此函数calc()。

Answer 2

在您的 TOTAL 输入上添加类总数并使用此 jQuery 更改颜色..

$("input").change(function () {
    $('.total').css("background", "orange");
});