CODEWITHSUNDEEP
javascriptjquerycsssharepoint
Louise McMahon
Louise McMahon

Reputation: 2165

css on a class depending on what is contained

I have a share point calender and i want to color code difrent blocks depending on what reg number they contain (its for a school's minibuses)

How do i set the background color of .ms-cal-eworkday if a.ms-cal-tweekitem contains "EF04 WTR"

I need to do this in js/jquery as i don't have the abity to edit the aspx (council politics)

Each entry looks like this.

<td class="ms-cal-eworkday" rowspan="6"> 
    <table cellpadding="0" cellspacing="0" border="0" class="ms-cal-tweekitem" dir="">
    <tbody><tr>
        <td valign="top" href="/schools/ecclesfield/newdemosite/minibus-booking/Lists/Minibus/DispForm.aspx?ID=3" onclick="GoToLink(this);return false;" target="_self">
         <div>
          <img src="/_layouts/images/blank.gif" width="50" height="1" alt=""><br>
          <img src="/_layouts/images/recursml.gif" class="ms-cal-hidden" alt="" align="absmiddle">
          <a onfocus="OnLink(this)" class="ms-cal-dayitem" href="/schools/ecclesfield/newdemosite/minibus-booking/Lists/Minibus/DispForm.aspx?ID=3" onclick="GoToLink(this);return false;" target="_self" tabindex="5">
            <nobr>03:00 PM</nobr>
            <br>
            <b>test2</b>
            <br>
            EF04 WTR
            </a>
         </div>
         </td>
     </tr>
     </tbody></table>

</td>

I know the code is a bit of mess that's just how sharepoint works :(

Thanks in advance.

Lewis

Upvotes: 0

Views: 129

Answers (3)

Santiago Rebella
Santiago Rebella

Reputation: 2449

In the same line that above answers my only change on the aproach would be to create classes in the css and then add or remove class with jQuery, but just a detail

Upvotes: 0

arhea
arhea

Reputation: 454

Well one way is too loop through the table and check each cell.

$(function(){
    $('.ms-cal-dayitem').each(function(){
        if( $(this).text().indexOf("EF04 WTR") != -1 ) {
            $(this).closest('.ms-cal-eworkday').css("background-color","blue");
        }
    });
});

Upvotes: 1

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

Obviously change the colour to suit, but this would set the background red for any td.ms-cal-eworkday that contains a.ms-cal-dayitem with the text EF04 WTR...

$("a.ms-cal-dayitem").filter(function() {
    return $(this).text().indexOf("EF04 WTR") != -1;
}).closest("td.ms-cal-eworkday").css("background-color", "red");

filter() means it will only return the elements that match the criteria, which in this case is containing the relevant text.

Upvotes: 1

Related Questions