满足条件时更改字体颜色

Question

does anyone know how I would do this within an HTML-5 web based application? ie I need to change the font colour of a name when a button is pressed. It's for an application that easily shows when players are on or off court in a tennis tournament. so far I have an excel document of all the players loaded in to an html, this is one of the names for instance:

and buttons as follows:

so I assume I could write an if condition that states if that button is on, then the player's name goes red or something.. I'm also struggling with layout, considering the names are in a table, the button just stays above the table wherever I put it. Any help is much appreciated, Louis.

Answer 1

You could simply add/remove a class instead of only changing the value. This class can be referenced via CSS.

Example

.online_text {
    color: #00ff00;
}
.offline_text {
    color: #ff0000;
}

Your script should add/remove the property so you basically get this format :

<td ... class="online_text">Oliver Addison</td>

Adding the class as example:

document.getElementById("onoff").className += "online_text";

Answer 2

You need to give the element that you want to change something defining - usually an ID. For example, <td id="currentMatch">

Note that IDs need to remain unique throughout your page. You can then access it via document.getElementById("currentMatch")

To set the color of the text you'd want to use

document.getElementById("currentMatch").style.color = "#00FF00"

So that's how you change the color.