Показать сообщение отдельно
  #11 (permalink)  
Старый 31.01.2023, 19:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

таблица из массива объектов
Aidec,
песочница не работает с http, поэтому нет фото тут, нужно https для макета
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid #999;
            padding: 0.5rem;
            text-align: left;
        }

        td img {
            height: 50px;
            width: 50px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tbody = document.querySelector(".presentation tbody");
            const personal = [{
                ID: "13355",
                title: "Вася",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "77777",
                title: "Паша ",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "4444",
                title: "света",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "99999",
                title: "зоя",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "111111",
                title: "рома",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }];
            for (const {
                    ID,
                    title,
                    foto
                } of personal) tbody.insertAdjacentHTML("beforeend", `<tr><td>${ID}<td>${title}<td><img src="${foto}" alt=""><td>нет<td>нет`)
        })
    </script>
</head>

<body>
    <table class="presentation">
        <thead>
            <tr>
                <th>Ключ</th>
                <th>Имя</th>
                <th>Фото</th>
                <th>Уровень</th>
                <th>Специализация</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>

Последний раз редактировалось рони, 31.01.2023 в 19:06.
Ответить с цитированием