将颜色更改为HTML输入值

Question

我的网页上有很多输入字段，您可以看到

当我使用onchange事件编辑（例如）GP1的分数时，每个其他分数将自动更新。我希望当这些结果更新时，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输入上添加class total并使用此jQuery更改颜色..

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