Сделать ячейку таблицы ссылкой

310

18 октября 2017, 05:43

Решил использовать fancyBox3 для вывода изображений. Но возникла проблема в том, что кнопки на моем сайте оформлены через <td> и onclick. А по этой библиотеке используется тег <a>, как можно обернуть ячейку так, чтобы она вся была ссылкой, при этом бы работал скрипт? Простое <a><td></td></a> не работает.

UPD: Судя по документации, это работает так:

<a href="image.jpg" data-fancybox data-caption="My caption">
    <img src="thumbnail.jpg" alt="" />
</a>

Мне же нужно, чтобы работало так:

<a href="image.jpg" data-fancybox data-caption="My caption">
        <td>Ячейка 1</td>
    </a>

При этом бы клик считался при нажатии любой части ячейки.

Answer 1

td{ 
  border: 1px solid; 
  width: 150px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" rel="stylesheet"/> 
 
 
<table> 
  <tr> 
    <td data-fancybox href="http://via.placeholder.com/350x150">Ячейка-ссылка</td> 
    <td>1.2</td> 
  </tr> 
  <tr> 
    <td>2.1</td> 
    <td>2.2</td> 
  </tr> 
</table>