preciso de ajuda. Preciso criar uma tabela onde contenha nomes, id, e status do processo. São basicamente 32 processos que serão listados. Ou seja 32 linhas. A minha duvida é a seguinte: Com javascript ei consigo selecionar uma linha da tabela e clicar no botão e ele altere o background da linha para a cor verde/ vermelho ou amarelo? Preciso que esses 3 botões façam essas funçoes pra as 32 linhas, e sobreponham a ultima cor selecionado. Consigo fazer isso com javascript, html e css? Poderiam me dar uma luz?
html :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/arquivo.css" />
</head>
<body>
<table id='minhaTabela'>
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Status</th>
<tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>CIDADE</td>
<td>Online</td>
</tr>
<tr>
<td>02</td>
<td>CIDADE</td>
<td>Online</td>
</tr>
<tr>
<td>03</td>
<td>CIDADE</td>
<td>Online</td>
</tr>
<tr>
<td>04</td>
<td>CIDADE</td>
<td>Online</td>
</tr>
<tr>
<td>05</td>
<td>CIDADE</td>
<td>Online</td>
</tr>
</tbody>
</table>
<button id="visualizarDados">Online</button>
<button id="visualizarDados">offline</button>
<button id="visualizarDados">Manutenção</button>
</body>
</html>
css:
{
body{
font-family:sans-serif;
}
#minhaTabela{
width:80%;
margin:0 auto;
border:0;
box-shadow: 0 5px 30px darkgrey;
border-spacing: 0;
}
#minhaTabela thead th{
font-weight: bold;
background-color: black;
color:white;
padding:5px 10px;
}
#minhaTabela tr td{
padding:5px 10px;
text-align: center;
cursor: pointer; /**importante para não mostrar cursor de texto**/
}
#minhaTabela tr td:last-child{
text-align: right;
}
/**Cores**/
#minhaTabela tr{
background-color: #1ca043;
}
/**Cor quando passar por cima**/
#minhaTabela tr:hover td{
background-color: #feffb7;
}
/**Cor quando selecionado**/
#minhaTabela tr.selecionado td{
background-color: #ac2539;
}
button#visualizarDados{
background-color: white;
border: 1px solid black;
width:33%;
margin: 10px auto;
padding:10px 0;
color: black;
display: inline-block;
box-shadow: 0 5px 30px darkgrey;
}