Форум

рони · #11 (**permalink**) 31.01.2023, 19:01

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>

Aidec · #12 (**permalink**) 31.01.2023, 19:16

Скажи, а как сделать что бы эти объекты автоматически проставлялись в таблицу, просто я замучаюсь 500 с копейками объектов сюда вписывать.

Я на ютубе ролик нашел, там как раз мой вариант, но я немогу его использовать, знаний не хватает.
Посмотри пожалуйста, может ты поймёшь как использовать его метод в моей сетуации( ролик короткий)
https://youtu.be/TYRJ_X9qMSE

рони · #13 (**permalink**) 31.01.2023, 19:23

Сообщение от Aidec

Скажи, а как сделать что бы эти объекты автоматически проставлялись в таблицу, просто я замучаюсь 500 с копейками объектов сюда вписывать.

бред какой-то... вам дали готовое решение что не так?
вам надо только одну строку поменять на

const personal = getPersonal();

и всё

Aidec · #14 (**permalink**) 31.01.2023, 19:33

Блин сори)))
Я не понял сразу.
Огромное спасибо!)

рони · #15 (**permalink**) 31.01.2023, 19:38

Aidec,

document.addEventListener("DOMContentLoaded",async function() {
            const tbody = document.querySelector(".presentation tbody"); //куда выводить,указать селектор своей таблицы
            const personal = await getPersonal();// что выводить, getPersonal должна быть доступна
            for (const {   //вывод данных в таблицу
                    ID,
                    title,
                    foto //указать остальные ключи если нужно тут и ниже
                } of personal) tbody.insertAdjacentHTML("beforeend", `<tr><td>${ID}<td>${title}<td><img src="${foto}" alt=""><td>нет<td>нет`)
        })

Aidec · #16 (**permalink**) 01.02.2023, 07:46

Сделал все как ты написал, но чет не выводится, может не getPersonal
Просто массив выводится когда я пишу console.log(listTr)

рони · #17 (**permalink**) 01.02.2023, 09:25

Aidec,
где у вас есть массив туда и ставьте код, учитывая ваши классы элементов на странице и названия переменных.

const tbody = document.querySelector(".presentation tbody");
 for (const {   //вывод данных в таблицу
                    ID,
                    title,
                    foto //указать остальные ключи если нужно тут и ниже
                } of listTr) tbody.insertAdjacentHTML("beforeend", `<tr><td>${ID}<td>${title}<td><img src="${foto}" alt=""><td>нет<td>нет`)

рони · #18 (**permalink**) 01.02.2023, 09:28

Сообщение от Aidec

может не getPersonal

в таком случае смотрят ошибки в консоли и скорее всего getPersonal либо не доступна либо не учтена асинхронность ответа с сервера

Aidec · #19 (**permalink**) 01.02.2023, 14:03

Ну я попробовал с тем кодом что я писал с самого начала, он мне весь список массива выдал(его номера от 0-500), дальше пробовал писать так: personal[0].ID в итоге он мне выдал таблицу с четырьмя строками 0,1,2,3, ID был под номером 1520, короче он просто посчитал сколько цифр в этом ID, так же и с ФИО-Title.

рони · #20 (**permalink**) 01.02.2023, 14:24

Aidec,
без живого макета, можно только гадать.

Форум

Справочник

Discord чат

Курсы javascript