Question

我需要为包含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>

SCRIPT

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

Answer 1

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

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/

Answer 2

每个循环的正文都会查看单个tr，尝试在那里找到th和td，但在HTML中th和{{1不在同一行。您需要在td中查找th或在tr.prev()中查找td。

Answer 3

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

<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？

Jquery。查找带有文本的td

3 个答案: