Скрыть строку таблицы по клику с помощью jQuery - PullRequest
Новая
       15

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

0 голосов
/ 28 декабря 2010

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

<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, то ссылка, по которой она находится, скрыта, а если под ней есть строка таблицы заметок, она также скрывает это.

Ответы [ 2 ]

1 голос
/ 28 декабря 2010 
$('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;
});

Я думаю ... По памяти.

РЕДАКТИРОВАТЬ

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

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

0 голосов
/ 28 декабря 2010

Это было бы хорошим местом для .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
});

Вы можете проверить это здесь .Для этого используйте .closest(), чтобы подняться до <tr>, .hide() этой строки, выберите .next() <tr> если имеет класс .notes_row, а также .hide().Наконец, я добавляю туда event.preventDefault(), чтобы мы не переходили к action.php от самой ссылки.

...