Как сделать строки в таблице на 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. не использовать таблицу. сверстать на флексбокс, каждую строку обернуть в ссылку. <br/> <pre><code>&lt;a href="#" class="link"&gt;
  &lt;span class="name"&gt;Ремонт1&lt;/span&gt;
  &lt;span class="hours"&gt;3-5 часов&lt;/span&gt;
  &lt;span class="price"&gt;1190 ₽&lt;/span&gt;
&lt;/a&gt;</code></pre> <br/> <br/> 2 .  javascript: повесить на tr событие onclick <br/> <pre><code>&lt;tr class="link3" data-url="https://yandex.ru" onclick="goToUrl(this)"&gt;
    &lt;td&gt;Text&lt;/td&gt;
&lt;/tr&gt;
&lt;script&gt;
      function goToUrl(i) {
        const url = i.dataset.url
        window.location.href = url
      }
&lt;/script&gt;</code></pre>
Похожие вопросы