Jquery。查找带有文本的td

时间:2013-07-27 21:26:14

标签: jquery

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

3 个答案:

答案 0 :(得分:2)

由于您的<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/

答案 1 :(得分:1)

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

答案 2 :(得分: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?