使用 jQuery 设置表格单元格样式答案

【问题标题】：Style table cells using jQuery使用 jQuery 设置表格单元格样式
【发布时间】：2010-11-01 12:38:00
【问题描述】：

我正在尝试根据是否包含字符 | 来设置表格中表格单元格的样式。在 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 类的表格单元格中，包含超链接的背景颜色应为红色。唯一的例外是任何具有 ms-cal-monthitem 类的表格单元格，其中包含具有字符 | 的超链接。在他们的 href 属性中。

到目前为止我得到了什么；

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

【问题讨论】：

在您的帖子中您说“ms-cal-monthitem”但在您的代码中您有“ms-cal-workitem” - 这是故意的吗？
@Jonathan-因为它们是一个带有“ms-cal-workitem”类名的“td”标签，它是所有“a”标签的父级，那么这可能是故意的
抱歉，打错了。在文本中应该说 ms-cal-workitem。
@TStamper - 我已经修复了示例 HTML，希望它更清晰。我想有两个问题？如何将具有 ms-cal-workitem 类且包含带有字符 | 的超链接的任何表格单元格的背景颜色设置为红色在链接中？与此相反，如何将任何具有 ms-cal-workitem 类且包含不带字符的超链接的表格单元的背景颜色设置为蓝色 |在链接中？

标签： jquery jquery-selectors sizzle

【解决方案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");  
});

【讨论】：

【解决方案2】：

如果我可能会问一个愚蠢的问题，为什么不在服务器端处理时分配类而不是使用 jquery 来执行此操作？它不是动态变化的，对吗？

【讨论】：

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