मेरे पास एक मॉडल फॉर्म है जिसे मैं एक टेबल में प्रदर्शित कर रहा हूं। प्रपत्र में लगभग ४० फ़ील्ड हैं जो ६ अलग-अलग तालिकाओं में विभाजित हैं। यदि डीबी में फ़ील्ड खाली है तो मैंने तालिका तत्वों को प्रदर्शित नहीं करने के लिए एक कथन सेट किया है। यह अपेक्षित रूप से काम करता है एकमात्र मुद्दा यह है कि यदि सभी तत्व छिपे हुए हैं तो तालिका शीर्षलेख अभी भी प्रदर्शित होता है। मैं तालिका शीर्षलेख को कैसे छिपा सकता हूं यदि सभी उस विशेष तालिका के तत्व छिपे हुए हैं।

<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>
0
Wazy 1 सितंबर 2021, 17:43

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>
0
Wazy 1 सितंबर 2021, 21:32

यदि <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
Rvector 1 सितंबर 2021, 15:25