Hide table header if there is no row

Question

I have a table with patients in which, for each row of table I can remove the row or do other operations, so when I remove all the rows I want my table header to be hidden or removed.

<table id ="results-table" class="table table-strip">
        <thead>
            <tr>
                <th>Emri</th>
                <th>Mbiemri</th>
                <th>Numri personal</th>
                <th>Vendi i lindjes</th>
                <th>Data e diagnozës së parë</th>
                <th>Data e raportimit</th>
                <th>Mjeku raportues</th>
                <th>Veprimet</th>
            </tr>
        </thead>
        {% if patient_docs and patient_docs.collection.count() > 0 %}
        <tbody id="patient-list">
        {% for patient_doc in patient_docs %}
            <tr>
                {% if patient_doc.patient is defined %}         
                <td>{{ patient_doc.patient.emri }}</td>
                <td>{{ patient_doc.patient.mbiemri }}</td>
                <td>{{ patient_doc.patient.numri_personal }}</td>
                <td>{{ patient_doc.patient.vendi_lindjes }}</td>{% endif %}
                <td>{% if patient_doc.diagnosis is defined %}{{ patient_doc.diagnosis.data_diagnozes_se_pare }}{% endif %}</td>
                <td>{% if patient_doc.treatment is defined %}{{ data_e_raportimit }}{% endif %}</td>
                <td>{% if patient_doc.treatment is defined %}{{ patient_doc.treatment.mjeku_raportues }}{% endif %}</td>
            </tr>
        {% endfor %}
        </tbody>
        {% endif %} 
    </table>

So how can I do that using jQuery, so that if there is no row hide the header and and show a message there is no patient registered?

Answer 1

You can put the line

{% if patient_docs and patient_docs.collection.count() > 0 %}

before the "thead"

OR with jquery in a document.ready, you can check the lenght

 if ($('#results-table > tbody > tr').length == 0){
     $('#results-table > thead > th').css('display','none');
 }

Answer 2

Noticed you actually want to basically hide the entire table (not just the header) and show a message saying that no patients are registered.

Easy way to do this would be to create a function, check if rows exist, if they do then hide message, show table, otherwise do the opposite

var $msg = $('#msgDivId');
function showMsgOnEmptyTable(target, msg){
    var $target = $(target);
    if( $target.find('tr') ){ 
        $target.show( );
         $msg.hide();
    } else { 
        $target.hide();
        $msg.show();
    }
}

in html

<div id="msgDivId">
    No Patients Registered
</div>
<table id="targetTable"> ... table stuff goes here ... </table>

And when ever you make changes to the table call

showMsgOnEmptyTable('#targetTable');

Answer 3

everytime u remove a row u can count the number of rows left using

var rowCount = $('#myTable tbody tr').length;

if rowcount goes to 0 then just hide the table using .hide()

Answer 4

in your add and remove functions you can add method like renderBody which will be hide or show your tbody part:

function addRow() {
    ...
    renderBody();
}

function removeRow() {
    ...
    renderBody();
}

function renderBody() {
    var $tbody = $('#patient-list');
    if (patient_docs && patient_docs.collection.count() > 0) {
        $tbody.show();
    }
    else {
        $tbody.hide();
    }
}