Заполнение таблицы данных Semanti c из JSON данных - PullRequest
Новая
       7

Заполнение таблицы данных Semanti c из JSON данных

0 голосов
/ 23 января 2020

Как мне заполнить данные таблицы, используя файл JSON? Я хочу изменить стили, используя CSS классы в пользовательском интерфейсе Semanti c, когда я загружаю данные с помощью файла JSON. У меня есть жестко закодированные данные в таблице (которые я хочу изменить с помощью данных JSON)

Ниже приведена жестко закодированная структура таблицы: 

<table class="ui black table" id="tableCustomerDetails">
    <thead>
        <tr>
            <th>Custome Name</th>
            <th>Customer ID</th>
            <th>Status</th>
            <th>Special Approval Pending</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <h4>
                    <img src="<c:url value='/resources/img/deadpool.jpeg'/>" class="ui left floated mini rounded image">
                    <span class="content">
                        Matthew
                        <div class="sub header">Fabric Design
                        </div>
                    </span>
                </h4>
            </td>
            <td>200</td>
            <td>
                <div class="ui blue label">
                    Pending
                </div>
            </td>
            <td>
                <div class="ui left labeled icon buttons">
                    <div class="ui mini blue button" id="buttonPendingSpecialApproval">
                        <i class="chevron circle right icon"></i>
                        Yes
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <h4>
                    <img src="<c:url value='/resources/img/avatar/people/Rick.png'/>"
                        class="ui left floated mini rounded image">
                    <span class="content">
                        Matthew
                        <span class="sub header">Fabric Design
                        </span>
                    </span>
                </h4>
            </td>
            <td>310</td>
            <td>
                <div class="ui green label">
                    Submitted
                </div>
            </td>
        </tr>
    </tbody>
</table>

1 Ответ

0 голосов
/ 23 января 2020

Использовать основы c JavaScript: 

const data = JSON.parse(data);
document.getElementById("class1").className = data.A.class;
document.getElementById("content1").innerHTML = data.A.content;
document.getElementById("img1").src = data.A.img;
...