Change entire row text color?

Question

I am trying to change the text color of an entire list row on SharePoint 2013 however have only been able to change 1 column based on the JS code below. Any ideas??

<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('Temporary Outage')")
$Text.css("color", "#ffffff");
});
</script>

Answer 1

You'd want to do something like this I think:

$(document).ready(function(){
  //this finds the cell(s)
  $Text = $("td[role='gridcell']:contains('Temporary Outage')")
  //go up the dom to find the parent row and set the background color to red
  //for easily seeing if it worked
  $Text.closest("tr").css("background-color", "red");
});

Answer 2

Note:

in June 2017, Microsoft disabled the use of JavaScript in a Calculated Column

That means given answers may not apply for newer SharePoint versions

For long explanation and work arounds see:
June 13th 2017 Microsoft blocked handling HTML markup in SharePoint calculated fields - how to get the same functionality back

---

**Original answer:**

In a View (and only in a View!) you can use Calculated Columns to color Rows, this works since SharePoint 2010 and does not require jQuery or any scriptfiles.

Whole trick is to set the datatype of a Formula to Number so the HTML (and Javascript) is evaluated. For full docs see https://www.365csi.nl/vm365com/#/How

So to color your rows lightCoral red use the Formula:
(remember to set to datatype to Number)

=[Status] & IF([Status]="Temporary Outage"
    ,"<img src=""/_layouts/images/blank.gif"" onload=""{"
        &"var TR=this;while(TR.tagName!='TR'){TR=TR.parentNode}"                
        &"TR.style.backgroundColor='lightCoral';"
      &"}"">"
    ,"")

This displays the Status value and if its "Temporary Outage" will add a blank image to the page so the onload handler on it can immediatly execute the javascript to color the TR row.

You can go more advanced using this example code:

=[Town] 
 &"<img src=""/_layouts/images/blank.gif"" onload=""{"
        &"var TR=this;while(TR.tagName!='TR'){TR=TR.parentNode}"                
        &"TR.style.backgroundColor=" 
        &"({'Bristol':'Yellow','Thames':'Green','London':'Pink'})['"
 &[Town]
        &"'];"
 &"}"">"

It uses a Javascript Object array to set the color

###SharePoint 2013 and Client Side Rendering In SharePoint 2013 using CSR might be a more preferred option (if you don't mind adding scriptfiles and setting JSLink connections)

###More StackOverflow answers using Calculated Columns:

• Highlight Row based on Todays date

This method has its own drawbacks as documented https://www.365csi.nl/vm365com/#/How; but is less programming, doesn't need VS or Designer and works on SP2010 as well.

###CalcMaster Bookmarklet to edit Formulas It is a PITA to debug Calculated Columns. Because you don't get feedback until you save a Formula and you end up having to click multiple times to get back to your Formula.

I have written a small 'CalcMaster' bookmarklet which hooks into the formula-editor and does a save of the Formula on every keypress; giving immediate feedback.
Recently published a first version on GitHub:

https://github.com/Danny-Engelman/CalcMaster

ICC

Answer 3

You can do something like this:

$("td.ms-cellstyle.ms-vb2:contains('Temporary Outage')").each(function(){
  $(this).css("color", "#ffffff");
});