Tabela com cor condicional

Code example with pure Javascript. You can select one line or multiples lines

by Rodrigo Portillo

HTML

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

<button id="visualizarDados">Visualizar Dados</button>

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;
  border-bottom: 1px solid #aaa;
}

#minhaTabela tr:last-child td{
  border-bottom: none;
}

#minhaTabela tr td:last-child,
#minhaTabela tr th:last-child{
  text-align: right;
}

/**Cores**/
#minhaTabela tr:nth-child(odd){
  background-color: #eee;
}

/**Cor quando passar por cima**/
#minhaTabela tr:hover td{
  background-color: #feffb7;
}


#minhaTabela tr.green td{
  background-color: #d9ffde;
}
#minhaTabela tr.blue td{
  background-color: #e4f3f7;
}
#minhaTabela tr.yellow td{
  background-color: #fff4d9;
}

/**Cor quando selecionado**/
#minhaTabela tr.selecionado td{
  background-color: black;
  color:white;
}

input.green:before{
 background-color: green;   
}
input.blue:before{
  background-color:blue;
}
input.yellow:before{
  background-color:#faba25;
}

input[type=radio]{
  position: relative;
  cursor: pointer;
}
input[type=radio]:after{
    content: ' ';
    border-radius: 50%;
    display: block;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: white;
    position: absolute;
    top:2px;
    left: 2px;
}
input[type=radio]:before{
    content: ' ';
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
}
input[type=radio].green:checked:after{
    background-color: green;
}
input[type=radio].yellow:checked:after{
    background-color: #faba25;
}
input[type=radio].blue:checked:after{
    background-color: blue;
}


button#visualizarDados{
  background-color: white;
  border: 1px solid black;
  width:50%;
  margin: 10px auto;
  padding:10px 0;
  display: block;
  color: black;
}

JavaScript

var dados = [{id: 1, nome: "Eu", status: "online"},{id: 13, nome: "Nós", status: "online"},{id:21, nome: "Tu", status: "online"},{id: 3, nome: "Ele/Ela", status: "online"}]; 

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

function loadData(){
	let trs = [];
  dados.forEach((obj, index)=>{
  	let statusclass = "";
    if(obj.status == "online"){
    	statusclass = "green";
    }else if(obj.status == "offline"){
    	statusclass = "yellow";
    }else if(obj.status == "maintenance"){
    	statusclass = "blue";
    }
  	trs.push(`<tr class="${statusclass}">
    						<td>${obj.id}</td>
                <td>${obj.nome}</td>
                <td>${obj.status}</td>
                <td>
                	<input type="radio" name="status${index}" class="green" onchange="updateLinha(${index}, 'online')" ${obj.status=="online"?'checked':''}/>
                  <input type="radio" name="status${index}" class="blue" onchange="updateLinha(${index}, 'maintenance')" ${obj.status=="maintenance"?'checked':''}/>
                  <input type="radio" name="status${index}" class="yellow" onchange="updateLinha(${index}, 'offline')" ${obj.status=="offline"?'checked':''}/>
                </td>
    					</tr>`);
  });
  
  document.querySelector("#minhaTabela tbody").innerHTML = trs.join("");
}

function updateLinha(index, status){
	dados[index].status = status;
  loadData();
}

/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");
btnVisualizar.addEventListener("click", function(){
  alert(JSON.stringify(dados));
});

loadData();