我有一个包含患者的表,对于表的每一行,我都可以删除该行或执行其他操作,所以当我删除所有行时,我希望我的表头被隐藏或删除。
<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来做到这一点,这样,如果没有行隐藏标题并显示消息,那么就没有患者注册?
您可以放置行
{%if patient_docs and patient_docs.collection.count()>0%}
在"thead"之前
或在文档中使用jquery。好了,你可以检查的长度
if ($('#results-table > tbody > tr').length == 0){
$('#results-table > thead > th').css('display','none');
}
每次删除一行时,都可以使用计算剩余的行数
var rowCount=$('#myTable tbody-tr').length;
如果rowcount变为0,那么只需使用.hide()隐藏该表
在add
和remove
函数中,您可以添加类似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();
}
}
注意到您实际上想要基本上隐藏整个表(而不仅仅是表头),并显示一条消息,说明没有患者注册。
简单的方法是创建一个函数,检查行是否存在,如果存在,则隐藏消息,显示表,否则执行相反的
var $msg = $('#msgDivId');
function showMsgOnEmptyTable(target, msg){
var $target = $(target);
if( $target.find('tr') ){
$target.show( );
$msg.hide();
} else {
$target.hide();
$msg.show();
}
}
在html 中
<div id="msgDivId">
No Patients Registered
</div>
<table id="targetTable"> ... table stuff goes here ... </table>
当你对表格进行更改时,请调用
showMsgOnEmptyTable('#targetTable');