Размещено: 2023-12-19 15:50:52

Теги: html, js

ТАБЛИЦА С ССЫЛКАМИ НА ВСЮ СТРОКУ НА JS

Сделать просто так <a href="/url"><tr><td>t1</td><td>t2</td></tr></a> невозможно, и тут приходится мудрить с js:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
    table {
        border-collapse: collapse;
    }

    tr {
        cursor: pointer;
    }

    td {
        border: 1px solid black;
        padding: 5px;
    }

</style>
</head>
<body>

<table>
<tr class="tr_clicked" data-href="/url_1"><td>t1</td><td>t2</td></tr>
<tr class="tr_clicked" data-href="/url_2"><td>tt1</td><td>tt2</td></tr>
</table>

<script>

function preventEvent (event){
    window.location.href=event.currentTarget.getAttribute('data-href');
}

document.querySelectorAll('.tr_clicked').forEach( (elem) => elem.addEventListener('click', preventEvent));

</script>
</body>
</html>

На эту страницу чаще всего попадают по запросам: ссылка на всю строку, tr href,