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

Просто (надеюсь) быстрый вопрос, у меня есть следующий код 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, мне очень нравится идея сделать это чисто и незаметно: -)

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 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.