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

12 голосов | спросил Nick 4 MaramThu, 04 Mar 2010 02:41:29 +03002010-03-04T02:41:29+03:0002 2010, 02:41:29

3 ответа


0

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

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

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

ответил cletus 4 MaramThu, 04 Mar 2010 02:43:38 +03002010-03-04T02:43:38+03:0002 2010, 02:43:38
0

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

$('table tr').live("click",function(e){ 
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
        return;
        }
        alert('works');
});
ответил Scott Yu - Front-End UX 22 +04002010-10-22T22:28:10+04:00312010bEurope/MoscowFri, 22 Oct 2010 22:28:10 +0400 2010, 22:28:10
0

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

Пример 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.

ответил leaber 5 +04002010-10-05T23:20:54+04:00312010bEurope/MoscowTue, 05 Oct 2010 23:20:54 +0400 2010, 23:20:54

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132