Блог

Главная - Вопросы по программированию - скрыть заголовок таблицы, если все значения в таблице равны нулю

скрыть заголовок таблицы, если все значения в таблице равны нулю

#javascript #html #django

Вопрос:

У меня есть форма модели, которую я отображаю в таблице. Форма содержит около 40 полей, разбитых на 6 различных таблиц. Я настроил операторы if, чтобы не отображать элементы таблицы, если поле в базе данных пустое. Это работает, как и ожидалось, единственная проблема заключается в том, что если все элементы скрыты, заголовок таблицы все равно отображается. Как я могу скрыть заголовок таблицы, если все элементы в этой конкретной таблице скрыты.

 <table class="post-table">
    <tr>
        <th class="table-header" colspan="2">
            <h3>Pool Details</h3>
        </th>
    </tr>
    <tbody>
        {% if post.pool_size != '' %}
        <tr>
            <td>pool size:</td>
            <td>{{ post.pool_size }}</td>
        </tr>
        {% endif %} 
        {% if post.pool_style != '' %}
        <tr>
            <td>Pool Style:</td>
            <td>{{ post.pool_style }}</td>
        </tr>
        {% endif %}
    </tbody>
</table>

Обновить:

         <table class="post-table">
        <tr>
            <th class="table-header" COLSPAN="1" id="tab_header">
                <H3>ADDITIONAL INFO</H3>
            </th>
        </tr>
        <tbody id="tab_body">
            {% if post.additional_info != '' %}
            <tr>
                <td>{{ post.additional_info }}</td>
            </tr>
            {% endif %}
        </tbody>
    </table>

    <br>

    <script>
        let tbody = document.getElementById("tab_body").innerHTML;
        if (tbody === '') {
            tab_header = document.getElementById("tab_header").innerHTML = " ";
        } else {
            // Nothing to do i guess
        }
    </script>

Ответ №1:

Вы можете использовать JavaScript, чтобы скрыть заголовок, если <tbody> он пуст : Предположим, что <th id="tab_header">Tab header</th> <tbody id="tab_body">Some content here</tbody> у нас есть

 let tbody = document.getElementById("tab_body").innerHTML;
# Check if it contains something
if (tbody === '') {
    tab_header = document.getElementById("tab_header").innerHTML = "";
} else {
    // Nothing to do i guess
}

NB Имейте в виду, что проверка содержимого может быть не пустой строкой, а чем-то другим.

Комментарии:

1. Не могли бы вы взглянуть на мое обновление, я считаю, что оно реализовано правильно, но оно не скрывает заголовок таблицы.

2. Можете ли вы войти в var tbody в консоли : console.log(tbody)

3. Попробуйте : console.log(tbody ==='') проверить, является ли tbody пустой строкой

4. возвращает false , возможно, мне следует вместо этого использовать null?

5. Постарайтесь поставить id="tab_header" все на <tr> свои места. При этом вы также удалите узел, на котором css применяется ( <th> )

Ответ №2:

         <table class="post-table" id="table-example">
        <tr>
            <th class="table-header" COLSPAN="1" id="tab_header">
                <H3>ADDITIONAL INFO</H3>
            </th>
        </tr>
        <tbody id="tab_body">
            {% if post.additional_info != '' %}
                <tr>
                    <td id="test">{{ post.additional_info }}</td>
                </tr>
            {% endif %}
        </tbody>
    </table>

    
    <script>
        var tbl = document.getElementById('table-example');
        if (tbl.rows.length == 1) {
            console.log('IT WORKED')
            tab_header = document.getElementById("tab_header").innerHTML = "";
            
        }
        console.log(tbl.rows.length)
    </script>
Метки: ,