Style table cells using jQuery

Question

I'm trying to style table cells within a table based upon whether or not the contain the character | in the url or not (don't ask, dealing with SharePoint).

Sample HTML;

<table>
<tr>
<td class="ms-cal-workitem">
<table>
<tr>
<td class="ms-cal-monthitem">
<a href="http://localhost:4657/1">Event 1</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ms-cal-workitem">
<table>
<tr>
<td class="ms-cal-monthitem">
<a href="http://localhost:4657/1|435348578-kfsd-sdfsf-sfsf-324ewwer">Event 2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

In any table cell, with the class ms-cal-workitem, containing a hyperlink should have a background color of red. The only exception to this are any table cells, with the class ms-cal-monthitem, containing a hyperlink that have the character | in their href property.

What I've got so far;

        $(document).ready(function() {
            $("td.ms-cal-workitem:has(a[href*='|'])").css("background-color", "#ffff99");
            $("td.ms-cal-workitem:has(a:not[href*='|'])").css("background-color", "#ffcc33");
        });

In your post you say "ms-cal-monthitem" yet in your code you have "ms-cal-workitem" - is this on purpose? — Sampson, Jun 09 '09 at 15:20
@Jonathan-since their is a 'td' tag with "ms-cal-workitem" class name that is the parent of all 'a' tags then this can be on purpose — TStamper, Jun 09 '09 at 15:27
Sorry, that's a typo. In the text it should say ms-cal-workitem. — , Jun 09 '09 at 15:33
@TStamper - I've fixed the sample HTML to hopefully make it clearer. I suppose there are two questions? How can I set the background color to red for any tablecell with the class ms-cal-workitem and that contains a hyperlink WITH the character | in the link? And the opposite of that, how can I set the background color to blue for any tablecell with the class ms-cal-workitem and that contains a hyperlink WITHOUT the character | in the link? — , Jun 09 '09 at 15:38

Patrick McElhaney · Accepted Answer · 2009-06-09T15:45:51.370

2

This seems to work.

$(document).ready(function() {
       $("td.ms-cal-monthitem:has(a[href*='|'])").css("background-color", "#ffff99");
       $("td.ms-cal-monthitem:has(a[href]):not(:has(a[href*='|']))").css("background-color", "#ffcc33");  
});

edited Jun 09 '09 at 15:45

answered Jun 09 '09 at 15:35

Patrick McElhaney

57,901
40
134
167

score 0 · Answer 2 · answered Jun 09 '09 at 15:20

0

If I might ask a silly question, why not assign classes when processing on the server side instead of doing this with jquery? It's not changing dynamically, correct?

answered Jun 09 '09 at 15:20

Jonathan Fingland

56,385
11
85
79

1

There's only one property for calendar items in a SharePoint calendar, BackgroundColorClassName, but this is only used for all day events :( – Jun 09 '09 at 15:31

Style table cells using jQuery

2 Answers2