Таблица на HTML как сделать кликабельными строки?
Есть таблица для сайта, нужно сделать так, чтобы кликабельный был не только текст, а так же строка таблицы, где он расположен
<table class="blueTable"> <tbody> <tr class="link3"><td> <a href="yandex.ru">Ремонт 1</a> <br> <small>3-5 часов</small> </td> <td><del>1190</del> <br> <b>3420</b> </td> </tr> <tr class="link3"> <td> <a href="yandex.ru">Замена экрана (копия) </a> <br><small>40 мин</small> </td> <td><b>4390</b></td> </tr> <tr><td>Ремонт 2<br> <small>15 минут</small> </td> |
<table class="blueTable"> <tbody> <tr class="link3"><td> <a href="yandex.ru">Ремонт 1</a> <br> <small>3-5 часов</small> </td> <td><del>1190</del> <br> <b>3420</b> </td> </tr> <tr class="link3"> <td> <a href="yandex.ru">Замена экрана (копия) </a> <br><small>40 мин</small> </td> <td><b>4390</b></td> </tr> <tr><td>Ремонт 2<br> <small>15 минут</small> </td>
Дополнительно:
1. не использовать таблицу. сверстать на флексбокс, каждую строку обернуть в ссылку.
<a href="#" class="link"> <span class="name">Ремонт1</span> <span class="hours">3-5 часов</span> <span class="price">1190 ₽</span> </a> |
<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> |
<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>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать строки таблицы на HTML кликабельными, можно использовать JavaScript. Ниже приведен пример кода, который демонстрирует как это можно сделать:
```html
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid black;
}
tr:hover {
background-color: lightgray;
cursor: pointer;
}
```
В данном примере таблица содержит две строки, каждая из которых имеет обработчик события `onclick`, который перенаправляет пользователя на указанный URL при клике на строку. Стилизация таблицы также включает изменение цвета фона строки при наведении курсора.
Таким образом, вы можете легко сделать строки таблицы кликабельными с помощью простого JavaScript кода и CSS стилей. Надеюсь, это поможет вам решить вашу проблему!