1

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>
  • I verified my .closest("tr") works in my SPO site – Eric Alexander Jun 12 '15 at 16:49
4

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");
});
1

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 http://ViewMaster365.com/#/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:

This method has its own drawbacks as documented on the ViewMaster365 site; 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

0

You can do something like this:

$("td.ms-cellstyle.ms-vb2:contains('Temporary Outage')").each(function(){
  $(this).css("color", "#ffffff");
});
  • I Tried your script however only the text 'Temporary Outage' is showing as white: $Text = $("td.ms-cellstyle.ms-vb2:contains('Temporary Outage')"); $Text.parent().css("background-color", "#ed303e"); $("td.ms-cellstyle.ms-vb2:contains('Temporary Outage')").each(function(){ $(this).css("color", "#ffffff"); My entire line is red which I want but I want all the text on this line to be white. – surfnode Jun 16 '15 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.