更改颜色以HTML输入值

我有我的网页上有很多输入字段，你可以看到更改颜色以HTML输入值

enter image description here

当我编辑（例如）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>

来源

2013-07-17 Emma Rossignoli

你能复制/粘贴你的代码，以便我们可以帮助你吗？ – ibi0tux

你不能用css选择器来做，所以你必须指定一个css类或者用JavaScript添加一个内联样式。 –

可以使用jQuery –

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

您可以定义一个如此的函数，它将在您的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()函数的末尾调用此函数。

来源

2013-07-17 09:54:14 ibi0tux

是的，那正是我的意思。谢谢！ :) –

不客气。我发布的这段代码可以通过这种方式大大改善。 – ibi0tux

你写了“ttot.style.color ='绿色';}”，它是htot :)解决这个问题;） –

添加类总在你的总输入，并使用此jQuery来改变颜色..

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

来源

2013-07-17 09:51:13

嗯问题是'改变颜色为HTML输入值'，所以你需要'$（'。total'）.css（“color”，“orange”）;'对吗？ –

y color sry我认为背景颜色XD –

更改颜色以HTML输入值

回答

相关问题