[英]How to hide table header row if no child rows, but show header row again if button clicked
[英]Hide table header if there is no row
我有一个带有患者的表,其中,对于表的每一行,我都可以删除该行或执行其他操作,因此,当删除所有行时,我希望隐藏或删除表头。
<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来做到这一点,以便在没有行的情况下隐藏标题,并显示一条消息,表明没有患者注册?
你可以把线
{如果Patient_docs和Patient_docs.collection.count()> 0%,则为%
在“ thead”之前
或者在文档中使用jquery.ready,您可以检查长度
if ($('#results-table > tbody > tr').length == 0){
$('#results-table > thead > th').css('display','none');
}
注意,您实际上实际上是想隐藏整个表格(而不仅仅是标题),并显示一条消息,指出没有患者在注册。
执行此操作的简单方法是创建一个函数,检查行是否存在,如果存在,则隐藏消息,显示表,否则执行相反的操作
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');
每次您删除一行时,您都可以使用来计算剩余的行数
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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.