SharePoint – Use JQuery to highlight rows

Hello everyone. Today I want to show you how you can use jQuery and SPServices to conditionally highlight rows of your SharePoint Web Parts.

Here is the script you need:

<script type="text/javascript" src="/sites/test2/Script/jquery.min.js"></script>
<script type="text/javascript" src="/sites/test2/Script/jquery.SPServices.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
operation: "GetListItems",
async: false,
listName: "Test",
CAMLQuery: "<Query><Where><Eq><FieldRef Name='YesNoField' /><Value Type='Integer'>1</Value></Eq></Where></Query>",
CAMLViewFields: "<ViewFields> <FieldRef Name='ID' /> </ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {

$("tr[iid*='"+ $(this).attr("ows_ID").toString() + "']").css("background-color", "#A3F02E");



The above Script will check the value of the “YesNoField” column in your “Test” List and if the value is “Yes” (1) it will highlight the row. If the value is “No” (0) it will do nothing.

To use the script click on Edit Page on your website and add your List Web Part and a Content Editor Web Part and add a link to your script to the Content Editor Web Part. (You need to store the script somewhere on your website in a Library.)


If you set up everything correctly the result will look like this:


That´s it. You can now use this method to highlight specific rows. I hope you liked my post. See you next time 🙂

And as always you can download my script from here.


Tagged ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: