0

我需要为包含 1 的 TD 设置颜色，但只为包含 AAA 的 TH 设置颜色。我有这张桌子，我准备了这个脚本。但脚本不起作用。你有什么想法吗？

非常感谢

桌子

<TABLE>
<TR><TH COLSPAN="2">AAA</TH></TR>
<TR>
    <TD>1</TD>
    <TD>2</TD>
</TR>
 <TR>
    <TD>A</TD>
    <TD>B</TD>
</TR>
<TR><TH COLSPAN="2">DDD</TH></TR>
<TR>
    <TD>1</TD>
    <TD>2</TD>
</TR>
 <TR>
    <TD>A</TD>
    <TD>B</TD>
</TR>
</TABLE>

脚本

$('tr').each(function(){
var tr = $(this);
if (tr.find('th:eq(0)').text()=="AAA") {
    if(tr.find('td:eq(0)').text()=="1") tr.addClass('hidden');
}
});

CSS

.hidden{
color:red;
 }
4

3 回答 3

3

由于您<TH>的 s 与其他行混合的方式，最简单的解决方案涉及遍历所有行，如下所示：

var lastHeader = '';
$('table tr').each(function() {
    var cells = $(this).find('td,th');
    if (cells.filter('th').size() > 0) { // this is a header row            
        lastHeader = cells.text();
    } else if (lastHeader == 'AAA') { // it's under an AAA section
        cells.filter(':contains(1)').addClass('hidden');
    }
});

你可以在这里看到一个例子：http: //jsfiddle.net/kapvr/

我在上面的脚本中采用了一些捷径，将类添加到包含文本的任何单元格中1——即使还有更多内容。如果你想要一个完全匹配，你可以像这样修改它：

var lastHeader = '';
$('table tr').each(function() {
    var cells = $(this).find('td,th');
    if (cells.filter('th').size() > 0) { // this is a header row            
        lastHeader = cells.text();
    } else if (lastHeader == 'AAA') { // it's under an AAA section
        cells.each(function() {
            if ($(this).text() == '1') $(this).addClass('hidden');
        });
    }
});

该版本可以在这里看到：http: //jsfiddle.net/5ybPp/

于 2013-07-27T21:54:32.620 回答
1

每个循环的主体查看单个tr，试图找到两者th和td那里，但在你的 HTML 中，thandtd不在同一行中。您需要寻找thintr.prev()或寻找tdin tr.next()。

于 2013-07-27T21:31:23.647 回答
0

就个人而言，我会更改标记以使其更容易。

<TABLE>
<TR><TH COLSPAN="2">AAA</TH></TR>
<TR>
    <TD class="hidden">1</TD>
    <TD>2</TD>
</TR>
<TR>
    <TD>A</TD>
    <TD>B</TD>
</TR>
<TR><TH COLSPAN="2">DDD</TH></TR>
<TR>
    <TD>1</TD>
    <TD>2</TD>
</TR>
<TR>
    <TD>A</TD>
    <TD>B</TD>
</TR>
</TABLE>

使用此更改后的标记，您根本不需要脚本。

在这种情况下，您如何获取 HTML？

于 2013-07-27T21:33:11.290 回答