Скрыть строку таблицы OnClick с помощью JQuery

Question

У меня есть куча строк таблицы, таких как:

<tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    <td><a href="action.php">cell3</a></td> 
</tr> 
<tr class="notes_row"> 
<td colspan="6"> 
<ul class="message warning no-margin" id="notes_box"> 
<li>Notes here</li> 
</ul> 
</td> 
</tr> 
<tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    <td><a href="action.php">cell3</a></td> 
</tr> 

Класс = «notes_row» только там, если ноты присутствуют для строки над ней. Как я могу скрыть tr и если там есть tr с классом notes_row ниже, не затрагивая другие строки с помощью jquery? Поэтому, если кто-то нажал на ячейку 3, tr, в которой находится ссылка, будет скрыта, если под ней находится строка таблицы заметок, она также скрывает это.

Answer 1

$('a[href=action.php]').click(function(){ // ... or however you attach to that link 
    var row = $(this).closest('tr'); 

    // hide this row first 
    row.hide(); 

    // next, get the next TR, see if it is a notes row, and hide it if it is 
    var nxt = row.next(); 
    if (nxt.hasClass('notes_row')) 
     nxt.hide(); 

    // stop link 
    return false; 
}); 

Я думаю ... Идти память здесь.

EDIT

Пара мелких исправлений и скрипку ссылку, чтобы увидеть его в действии:

http://www.jsfiddle.net/E6zcV/

Answer 2

Это было бы хорошим местом для .delegate(), это может быть столь же просто, как:

$("#tableID").delegate("a[href='action.php']", "click", function(e) { 
    $(this).closest("tr").hide().next("tr.notes_row").hide(); 
    e.preventDefault(); //don't follow the action.php href 
}); 

You can test it out here. Что это делает с помощью .closest() подняться до <tr>, .hide() что строки, выберите .next()<tr> если это имеет .notes_row класс и .hide(), что, как хорошо. Наконец, я добавляю event.preventDefault(), поэтому мы фактически не перейдем к action.php из самой ссылки.