jquery 在嵌套中添加类 <td>

jquery addclass in nested <td>

我正在尝试使用 jquery 在 SharePoint 列表中进行条件格式化。我遇到的问题是,在 SharePoint 页面中放置代码时,SharePoint 会添加一堆垃圾。我正在尝试有条件地突出显示 table 中带有特定文本的特定单元格。红色 = 红色背景,绿色 = 绿色背景。

我的编码方式存在问题,因为我的 table 被包裹在另一个 table 中(我无法控制这个),我正在寻找td 中的文本,父 td 也会设置样式。我只想用其中的文本设置特定 td 的样式。

我有一个 codepen 显示我所做的事情:http://codepen.io/Gregc72/pen/NdmoXj

HTML

<table>
<tr>
  <td>
<table>    
<tr><td>Test 1</td><td>Red</td></tr>
<tr><td>Test 2</td><td>Green</td></tr>    
</table>
</tr></td><table>

CSS

.greenBg {
    background: green;
}
.redBg {
    background: red;
}

脚本

$("td:contains('Green')").addClass('greenBg');
$("td:contains('Red')").addClass('redBg');

我不知道我是否可以以不同的方式格式化我的 css 选择器来完成此操作,或者我是否必须使用某种循环函数。我敢肯定答案很简单,我只是忽略了它。

如果这是你的修复结构,那么试试这个:

$("table tr td table tr td:contains('Green')").addClass('greenBg');
$("table tr td table tr td:contains('Red')").addClass('redBg');

这可能是使用 filter() 函数的好主意

PEN

$("td").filter(
     function (index) { return $(this).text() == "Red"; }
).addClass("redBg");

$("td").filter(
     function (index) { return $(this).text() == "Green"; }
).addClass("greenBg");