-1

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;
}

1 Resposta 1

-1

Fiz assim, criei 4 funções, uma para cada funcionalidade (selecionar, online, offline e manutenção), acredito que era isso que você queria, caso queira mudar cor, nome ou algo, está bem explicadinho no html.

html :

 <!DOCTYPE html>
 <html>

 <head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <script>
           var f = [],
                i = 0,
                j = 0;

           function sele(x) {
                document.getElementById(x).style.backgroundColor =
                     '#feffb7'; // <--- Escolha a cor quando for selecionado
                f[i] = [x];
                i++;
           }

           function online() {
                while (j < f.length) {
                     document.getElementById(f[j]).style.backgroundColor =
                          '#1ca043'; // <--- Escolha a cor quando for online
                     document.getElementById(f[j] + 'j').innerHTML = "Online";
                     j++;
                }
                j = 0;
                f = [];
                i = 0;
           }

           function offline() {
                while (j < f.length) {
                     document.getElementById(f[j]).style.backgroundColor =
                          'red'; // <--- Escolha a cor quando for offline
                     document.getElementById(f[j] + 'j').innerHTML = "Offline";
                     j++;
                }
                j = 0;
                f = [];
                i = 0;
           }

           function manutencao() {
                while (j < f.length) {
                     document.getElementById(f[j]).style.backgroundColor =
                          'yellow'; // <--- Escolha a cor quando for manutenção
                     document.getElementById(f[j] + 'j').innerHTML = "Manutenção";
                     j++;
                }
                j = 0;
                f = [];
                i = 0;
           }
      </script>
 </head>

 <body>
      <table id='minhaTabela'>
           <thead>
                <tr>
                     <th>ID</th>
                     <th>Nome</th>
                     <th>Status</th>
                <tr>
           </thead>
           <tbody>

                <!-- Ao criar novas linhas, só seguir esse mesmo padrão, não precisa modificar o script -->

                <tr id="n1" onclick="sele(id)">
                     <td>01</td>
                     <td>CIDADE</td>
                     <td id="n1j">Online</td>
                </tr>

                <tr id="n2" onclick="sele(id)">
                     <td>02</td>
                     <td>CIDADE</td>
                     <td id="n2j">Online</td>
                </tr>
                <tr id="n3" onclick="sele(id)">
                     <td>03</td>
                     <td>CIDADE</td>
                     <td id="n3j">Online</td>
                </tr>
                <tr id="n4" onclick="sele(id)">
                     <td>04</td>
                     <td>CIDADE</td>
                     <td id="n4j">Online</td>
                </tr>
                <tr id="n5" onclick="sele(id)">
                     <td>05</td>
                     <td>CIDADE</td>
                     <td id="n5j">Online</td>
                </tr>
           </tbody>
      </table>

      <button id="visualizarDados" onclick="online()">Online</button>
      <button id="visualizarDados" onclick="offline()">Offline</button>
      <button id="visualizarDados" onclick="manutencao()">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;
}

.br{
  display: none;
}
9
  • Como eu faria para ao inves de ficar em linhas na tabela ficasse em quadros um do lado do outro para seguir esse seu script? Commented 4/06/2022 às 1:38
  • Como assim em quadro? Commented 4/06/2022 às 1:49
  • Ao inves de as informações aparecerem em linhas na tabela, fazer elas aparecerem dentro de uma div quadrada. no caso Cada id em uma div. Ficaria um quadrado ao lado do outro com as informações. Commented 4/06/2022 às 1:55
  • tipo assim: i.stack.imgur.com/fDhnh.png Commented 4/06/2022 às 2:00
  • É o link de uma imagem acima. Commented 4/06/2022 às 2:21

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .