Показать сообщение отдельно
  #7 (permalink)  
Старый 18.04.2022, 21:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

HolySong,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        tbody td:hover:after {
            content: attr(data-th);
            color: #FF0000;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            let table = $('table');
            let txt = $.map($('thead td', table), ({
                textContent
            }) => textContent);
            let len = txt.length;
            $('tbody td', table).each((i, td) => td.dataset.th = txt[i % len])
        });
    </script>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>Заголовок 1</td>
                <td>Заголовок 2</td>
                <td>Заголовок 3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ячейка 4</td>
                <td>Ячейка 5</td>
                <td>Ячейка 6</td>
            </tr>
            <tr>
                <td>Ячейка 7</td>
                <td>Ячейка 8</td>
                <td>Ячейка 9</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
Ответить с цитированием