Alternate color for a column in SharePoint list using jQuery



In this post you will learn how to provide alternate color for a column in a SharePoint list using jQuery.

You will also understand how to debug the styles applied to page elements and jQuery or JavaScript added to the page.

We will be adding this Jquery code to the page using SharePoint designer.

Let's open the site using SharePoint designer and select the list where we want to show the alternate color for a column, click on List settings. Please see the below figure for reference.

You can see the figure here, this is what we are trying to achieve. For High, medium and Low different colors for each value.

Approach to implement the solution:

Finding the default style:

To implement the different color for each value of the column we need to understand the OOB styles applied to it.

You can use IE developer tool to understand the styles that are used in the current site by OOB SharePoint.

Open the list in IE and press F12. This will open the IE developer tool, then select one of the value in list column, you can see in the below screen what is the class for that td element and on the right side what is the respective styles applied to it.

Implementing the solution:

Adding jQuery to the page:

During implementation of this solution I have come across this article , but due to the some of the jQuery function is already working on this page, whenever I run the code in the article I get the below error

"document.getelementbyid object doesn't support this property or method".

This error you will come to know when you try to debug the jQuery code which you have added. We will see in this post on how to debug the jQuery code using IE developer tools.

So, I had to use resolve the above error I had to use the below query code.


To add above code to the page, select the page from the list setting and click on "Edit file in Advanced Mode".

Once the file is opened, add the code just below the main contentPlaceHolder. Refer below screenshot.


After implementing the jQuery in the page, you can observe from the below screenshot the color has been applied and if you open the IE developer tools you will understand the changes as well. .ms-Vb2 style color has been changed as in-line style.


Debug jQuery code:

It's always the case where you need to understand how to debug the code so that it will help you to troubleshoot the issues if the above code does not work as expected.

In this example we are using IE developer tools to debug the jQuery code which we have added above. To do it so, click F12 and select the Script tab and put a break point where you need to debug it, then click on Start debugging option.


Once you are done with everything, go back to the page press F5 or CTRL+R.  It will open the screen in debugging mode. Using this approach you can troubleshoot the issues and resolve it related to jQuery.

Using watch tab you can verify different properties also.

Conclusion:

In this post you have seen how to implement alternate color for column in a SharePoint list. How to understand the styles applied to the page elements and debugging query using the IE developer tool.


› Alternate color for a column in a SharePoint list using jQuery



Join 6,500 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers

About Author

Devendra Velegandla is a four-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2017) for Office Servers and Services MVP and  SharePoint Server. He received the MCC award for his contributions in Microsoft MSDN/TechNet forums. He loves sharing articles, videos, and tutorial on SharePoint and Office 365.