如果没有行,则隐藏表头

时间:2015-02-20 18:34:24

标签: javascript jquery html-table

我有一个患者表,其中,对于每一行表,我可以删除行或执行其他操作,因此当我删除所有行时,我希望隐藏或删除我的表头。

<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>

那么如何使用jQuery来做到这一点,这样如果没有行隐藏标题并显示消息,那么没有患者注册?

4 个答案:

答案 0 :(得分:2)

你可以把行

{%if patient_docs and patient_docs.collection.count()&gt; 0%}

之前&#34; thead&#34;

OR 在document.ready中使用jquery,你可以检查长度

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

答案 1 :(得分:0)

注意到你实际上想要基本上隐藏整个表格(而不仅仅是标题)并显示一条消息,说明没有患者注册。

这样做的简单方法是创建一个函数,检查是否存在行,如果它们然后隐藏消息,则显示表,否则执行相反的操作

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>

当你对表呼叫进行更改时

showMsgOnEmptyTable('#targetTable');

答案 2 :(得分:0)

每次删除一行你都可以使用

计算剩下的行数

var rowCount = $(&#39; #myTable tbody tr&#39;)。length;

如果rowcount为0,则只需使用.hide()

隐藏表

答案 3 :(得分:0)

在您的addremove函数中,您可以添加隐藏或显示renderBody部分的tbody方法:

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();
    }
}