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

Asked

Viewed 5,518 times

0

I need to make the table row change to a certain color based on the value contained within the tag 'td'. All functions that I have found so far have not been useful to me as I have tried to implement in my code and have not succeeded.

                <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 within this 'td' I need it to change the color of 'tr'. For example, as here is 'Completed', I need the whole line to be 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 jquery html css

  • Not clear enough. As this value is loaded in td?

  • @Leocaracciolo at the moment they are entered manually by me, because I still do not have the bank to make the connection, but the values will always be these: (Completed, Delayed, In Process, New).

  • Uai and pq do not change the color of tr manually by changing the content of td?

  • @Leocaracciolo why soon these data will be imported from the database automatically and I need to create a function able to color the line according to the value that will be imported.

  • I get it, I’m studying a solution here

  • Since you are new to the site, please read this post https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

  • Here is not forum to keep putting solved in titles. This is unnecessary, simply check which answer solved your problem

Show 2 more comments

1 answer

0


Setup:

On the line var texto = $("#idDaTabela tr:nth-child(1) td:nth-child(6)").text(); notice that we have tr:nth-child(1) which references 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 check 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>
<table id="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 the content of the cell to 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>
<table id="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>
<table id="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>

  • thank you very much my dear, this worked out, however it only makes in the first row of the table, would have to make so that this Function works coloring all lines?

  • yes, you mean the whole table right?

  • Yes yes, that’s right, for the whole table.

  • Just set the table id in the script, that is, in all rows $("#idTr"). css change to $("#idDaTable"). css

  • i did what you told me and when I went to see the result. Function changed to the same color all lines, no difference. Looks like he gets the result of the first IF and assigns the value to the others.

  • so it wasn’t that? for every table? will read the texo of td and if it is completed will apply the color corresponding to all lines, ie in the table. Changing the text to New will apply the corresponding color to the entire table

  • what needs to be done is for each line to be a color according to the value of the <td> With this code you gave me I may now be able to modify little by little to suit what I need, but if you can help me it will be very welcome!

  • vixi, then the question would be different, better ask another question so that the answer of this does not disagree!

Show 3 more comments

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.