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

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

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


click jquery html-table hyperlink
person Nick    schedule 03.03.2010    source источник

Ответы (3)


arrow_upward
18
arrow_downward

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

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

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

person cletus    schedule 03.03.2010
comment
Это здорово, спасибо Клетус! Я буду использовать это, но также добавлю пару разных классов для разных состояний и переключаюсь между ними при наведении - измените цвет фона, а также курсор, как вы предложили. - person Nick; 04.03.2010
comment
Проблема с этим решением (и со всеми другими, которые я нашел) заключается в том, что вы предполагаете, что все клики по строке должны загружать расположение ссылок в браузере. Как насчет правого клика? или cmd/ctrl+клики? Они изначально не вызывали бы такое поведение... - person Ben Hull; 16.05.2012

arrow_upward
5
arrow_downward

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

$('table tr').live("click",function(e){ 
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
        return;
        }
        alert('works');
});
person Scott Yu - builds stuff    schedule 22.10.2010

arrow_upward
2
arrow_downward

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

Пример 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");
  }
});

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

person leaber    schedule 05.10.2010