JQuery .find td с текстом в th

Question

Мне нужно установить цвет для TD, который содержит 1, но только для TH, которые содержат AAA. У меня есть эта таблица, и я готовлю этот скрипт. Но скрипт не работает. У вас есть идея, пожалуйста?

Спасибо очень

ТАБЛИЦА

<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

В теле каждого цикла выглядит на одном tr, пытаясь найти как th и td там, но в вашем HTML th и td не в той же строке. Вам нужно будет найти th в tr.prev() или найти td в tr.next().

Answer 2

Лично я бы изменил разметку, чтобы сделать это проще.

<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 в этом случае?

Answer 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/