Делаем строку таблицы (tr) кликабельной с помощью jQuery (со ссылкой href и hover !?)

Question

Просто (надеюсь) быстрый вопрос, у меня есть следующий HTML-код:

<tr>
 <td><img src="img/icons/file_pdf.png"></td>
 <td><a href="../upload/1267473577.pdf">Bulletin 1st March 2010</a></td>
 <td>(01/03/10)</td>
</tr>

В идеале я хотел бы получить способ получить ссылку href с помощью jQuery и сделать так, чтобы независимо от того, где вы щелкнете по этой конкретной строке таблицы, вы попадете на эту ссылку.

Есть ли способ сделать это? Я могу сделать это с помощью icky inline JavaScript в качестве абсолютного крайнего средства, но с тех пор, как я узнал о jQuery, мне очень понравилась идея сделать это чисто и ненавязчиво: -)

Answer 1

При условии, что это «нормальная» ссылка (не триггер Javascript), этого будет достаточно:

$("tr").click(function() {
  window.location.href = $(this).find("a").attr("href");
});

Возможно, вы захотите каким-то образом сообщить об этом поведении пользователю. Минимальным подходом будет изменение курсора при наведении курсора на строку.

Answer 2

Я нашел, что это решение хорошо работает для меня.

$('table tr').live("click",function(e){ 
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
        return;
        }
        alert('works');
});

Answer 3

Если у вас есть другая ссылка внутри таблицы, например, ссылка для удаления, вы можете использовать объект события, чтобы проверить, нажал ли пользователь на эту конкретную ссылку и избежать перенаправления.

Пример HTML:

<tr title="http://path/to/download">
  <td><img src="img/icons/file_pdf.png"></td>
  <td><a href="/path/to/delete">Delete</a></td>
  <td>(01/03/10)</td>
</tr>

Пример JavaScript:

$("tr").click(function(event) {
  if(event.target.nodeName != "A"){
    window.location.href = $(this).attr("title");
  }
});

Обычно в моих таблицах есть ячейка действия с редактированием и удалением, поэтому я использую событие щелчка строки, чтобы перенаправить на действие show.