使用jQuery来样式化表格单元格

Question

我希望您能够根据单元格中是否包含URL中的字符 |（竖杠）对表格中的单元格进行样式设置（不要问为什么，因为这涉及到SharePoint）。

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>

在任何包含超链接的类为ms-cal-workitem的表格单元格中，应该具有红色背景颜色。唯一的例外是包含字符|在其href属性中的超链接的类为ms-cal-monthitem的表格单元格。

目前为止我得到了什么：

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

- MarkP

---

你在帖子中提到了“ms-cal-monthitem”，但在你的代码中却是“ms-cal-workitem” - 这是有意为之吗？ - Sampson

@Jonathan-由于存在一个class名称为“ms-cal-workitem”的'td'标签，它是所有'a'标签的父级，因此这可能是有意为之的。 - TStamper

抱歉，那是笔误。正文应该写成ms-cal-workitem。 - MarkP

@TStamper - 我已经修复了示例HTML，希望能使它更清晰。我想有两个问题？如何为任何包含链接中字符|的ms-cal-workitem类表格单元格设置背景颜色为红色？相反，如何为任何不包含链接中字符|的ms-cal-workitem类表格单元格设置背景颜色为蓝色？ - MarkP

Answer 1

这似乎有效。

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

- Patrick McElhaney

Answer 2

如果我问一个愚蠢的问题，为什么不在服务器端处理时分配类，而要用jquery来做这件事呢？它不是动态变化的，对吧？

- Jonathan Fingland

---

在 SharePoint 日历中，日历项只有一个属性，即 BackgroundColorClassName，但这仅用于全天事件 :( - MarkP