Могу ли я расширить таблицу HTML, чтобы отобразить больше данных из другой модели django?

У меня есть приведенный ниже HTML-код, который создает таблицу, перебирая данные из модели Django SQL. Я хотел бы добавить кнопку "плюс" к каждой строке, позволяющую развернуть ее, чтобы показать несколько строк данных из РАЗНОЙ модели на основе совпадающих идентификаторов домохозяйств. Я пробовал много различных функций jquery, а также добавление другого тела к таблице с новым циклом для данных новой модели, но я не могу добиться желаемого результата. Любая помощь будет оценена по достоинству!

Пример желаемого результата: расширение изображения строки

Код:

<div class="container" style="height:600px;width:1200px;overflow:scroll;max-height:500px">
    <table position="relative" class="table table-bordered">
        <thead>
            <tr>
                <th>Household</th>
                <th>Name</th>
                <th>Account Number</th>
                <th>Basic Materials %</th>
                <th>Communication Services %</th>
                <th>Consumer Cyclical %</th>
                <th>Consumer Defensive %</th>
                <th>Energy %</th>
                <th>Financial Services %</th>
                <th>Healthcare %</th>
                <th>Industrials %</th>
                <th>Real Estate %</th>
                <th>Technology %</th>
                <th>Utilities %</th>
            </tr>
        </thead>
        <tbody>
            {% for i in sectors %}
            <tr>
                <td>{{ i.household }}</td>
                <td>{{ i.owner }}</td>
                <td>{{ i.account_num }}</td>
                <td>{{ i.basic_materials }}</td>
                <td>{{ i.communication_services }}</td>
                <td>{{ i.consumer_cyclical }}</td>
                <td>{{ i.consumer_defensive }}</td>
                <td>{{ i.energy }}</td>
                <td>{{ i.financial_services }}</td>
                <td>{{ i.healthcare }}</td>
                <td>{{ i.industrials }}</td>
                <td>{{ i.real_estate }}</td>
                <td>{{ i.technology }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Вот несколько ссылок, которые я пробовал: https://www.enjoysharepoint.com/expand-collapse-in-html-table-rows-using-jquery/ https://mdbootstrap.com/snippets/jquery/cam/979615#html-tab-view https://www.geeksforgeeks.org/how-to-make-html-table-expand-on-click-using-javascript/

Вернуться на верх