How to change table row color based on the value of a cell?

Question

How to change table row color based on the value of a cell?

Navigation

#1 by (0 votes)

0

I need to make the table row change to a particular color based on the value contained within the 'td' tag. All the functions I have found so far have not been useful to me since I tried to implement it in my code and I did not succeed.

                <tr>
                    <td id="IDbatchID">010203</td>
                    <td id="IDproduct">Leite</td>
                    <td id="IDbatchSize">30000</td>
                    <td id="IDpriority">1</td>
                    <td id="IDstartReq">03-31-2017 08:00:00</td>

Based on the value inside this 'td' I need it to change the color of the 'tr'. For example, as here is 'Completed', I need the entire line to turn green.

                    <td id="IDstatus">Completed</td>
                </tr>

I do not know if I could be clear in my doubt. I ask for help, because everything I have found so far has not served me.

javascript html jquery css

asked by anonymous 05.07.2017 / 16:41

1 answer

Element Higher than Input Make google-charts bar preview start from scratch

score 0 · Accepted Answer

Configuration:

At line var texto = $("#idDaTabela tr:nth-child(1) td:nth-child(6)").text(); note that we have tr:nth-child(1) referencing the first row of the table and td:nth-child(6) the sixth column of that row.

If there is a change in the table, set these parameters.

$(function() { 
var texto =  $("#idDaTabela tr:nth-child(1) td:nth-child(6)").text();			
var result = (texto);
					
if (result=="Completed"){
	$("#idTr").css("background","#FF0000");
}else if(result=="Delayed"){
	$("#idTr").css("background","#00FF00");
}else if(result=="In Process"){
	$("#idTr").css("background","#0000FF");
}else if(result=="New"){
	$("#idTr").css("background","#00FFFF");
}else{
	$("#idTr").css("background","#ccc");
        }	
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="idDaTabela" border="0">
<tr id="idTr">
<td id="IDbatchID">010203</td>
<td id="IDproduct">Leite</td>
<td id="IDbatchSize">30000</td>
<td id="IDpriority">1</td>
<td id="IDstartReq">03-31-2017 08:00:00</td>
<td id="IDstatus">Completed</td>
</tr>
</table>

Changing cell contents for In Process

$(function() { 
var texto =  $("#idDaTabela tr:nth-child(1) td:nth-child(6)").text();			
var result = (texto);
					
if (result=="Completed"){
	$("#idTr").css("background","#FF0000");
}else if(result=="Delayed"){
	$("#idTr").css("background","#00FF00");
}else if(result=="In Process"){
	$("#idTr").css("background","#0000FF");
}else if(result=="New"){
	$("#idTr").css("background","#00FFFF");
}else{
	$("#idTr").css("background","#ccc");
        }	
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="idDaTabela" border="0">
<tr id="idTr">
<td id="IDbatchID">010203</td>
<td id="IDproduct">Leite</td>
<td id="IDbatchSize">30000</td>
<td id="IDpriority">1</td>
<td id="IDstartReq">03-31-2017 08:00:00</td>
<td id="IDstatus">In Process</td>
</tr>
</table>

Example with two lines

$(function() { 
   var texto =  $("#idDaTabela tr:nth-child(2) td:nth-child(6)").text();
				
var result = (texto);
				
if (result=="Completed"){
	$("#idTr2").css("background","#FF0000");
}else if(result=="Delayed"){
	$("#idTr2").css("background","#00FF00");
}else if(result=="In Process"){
	$("#idTr2").css("background","#0000FF");
}else if(result=="New"){
	$("#idTr2").css("background","#00FFFF");
}else{
	$("#idTr2").css("background","#ccc");
}	
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="idDaTabela" border="0">
<tr id="idTr">
<td id="IDbatchID">010203</td>
<td id="IDproduct">Leite</td>
<td id="IDbatchSize">30000</td>
<td id="IDpriority">1</td>
<td id="IDstartReq">03-31-2017 08:00:00</td>
<td id="IDstatus">Completed</td>
</tr>


<tr id="idTr2">
<td id="IDbatchID2">010203</td>
<td id="IDproduct2">Leite</td>
<td id="IDbatchSize2">30000</td>
<td id="IDpriority2">1</td>
<td id="IDstartReq2">03-31-2017 08:00:00</td>
<td id="IDstatus2">Completed</td>
</tr>
</table>