Как сделать строки в таблице на HTML интерактивными для клика?

Как можно сделать ячейку таблицы, а не только текст, кликабельной на веб-сайте, используя HTML и CSS?
  • 1 апреля 2024 г. 17:59
Ответы на вопрос 2
Для того чтобы сделать строки или ячейки таблицы кликабельными на HTML странице, можно использовать JavaScript. Например, можно добавить атрибут onclick к элементу <tr> для строк или <td> для ячеек таблицы. 

Пример кода для добавления кликабельности на строку таблицы:

```html
<table>
  <tr onclick="alert('Вы кликнули на строку!')">
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr onclick="alert('Вы кликнули на строку!')">
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>
```

Также можно использовать CSS для изменения фона или стиля строки/ячейки при клике, добавив классы и прописав соответствующие стили в CSS:

```html
<style>
  .clickable {
    cursor: pointer;
  }
  .clickable:hover {
    background-color: lightgrey;
  }
</style>

<table>
  <tr class="clickable" onclick="alert('Вы кликнули на строку!')">
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr class="clickable" onclick="alert('Вы кликнули на строку!')">
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>
```

Таким образом, можно сделать строки или ячейки таблицы интерактивными для клика на веб-странице.
1. не использовать таблицу. сверстать на флексбокс, каждую строку обернуть в ссылку. 
<a href="#" class="link">
  <span class="name">Ремонт1</span>
  <span class="hours">3-5 часов</span>
  <span class="price">1190 ₽</span>
</a>


2 . javascript: повесить на tr событие onclick
<tr class="link3" data-url="https://yandex.ru" onclick="goToUrl(this)">
    <td>Text</td>
</tr>
<script>
      function goToUrl(i) {
        const url = i.dataset.url
        window.location.href = url
      }
</script>
Похожие вопросы