vendredi 11 décembre 2020

How can I use javascript to change the colour of a row in a table relative to input into table data?

Maybe using a script is a long and wrong option.

But I am making a table of players in football teams. I want each "position" in the table to have a different colour background. I could of course instead of a script assign different id/class and put into table row for each position one by one.

So for example, say I want all midfielders to have red background and all defenders blue background.

Example of table...

''' enter code here

<table>
<tr>
<th>Name</th>
<th>Club</th>
<th>Position</th>
<th>Height</th>
<th>Weight</th>
</tr>
 <tr class="defenders">
<td>Pique</td>
<td>Barcelona</td>
<td>Defender</td>
<td>190cm</td>
<td>85kg</td>
</tr>
<tr class="midfielders">
<td>Busquets</td>
<td>Barcelona</td>
<td>Midfielder</td>
<td>195cm</td>
<td>85kg</td>
</tr>
</table>

So in table we have a defender and a midfielder. I would like them to have different colour backgrounds.

I was thinking a javascript "if" function could work.

As in

if the td is midfielder the tr background is red if the td is defender the tr background is blue.

Is there an easy way to do this and what would be the code?

Or best just to use a class in the tr itself?

thanks.

Aucun commentaire:

Enregistrer un commentaire