javascript - 如何在表格过滤器中显示“未找到记录”消息
问题描述
我根据两个 tds 在我的桌子上应用过滤器。过滤器正在工作,但如果没有值匹配,我想显示 No Recod Found 消息。这是一个示例演示:
$("#filter").click(function () {
var tdScoring,tdEarning;
var scoring=$("#scoring1").val();
var earning = $("#earning1").val();
table = document.getElementById("mastermindTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
tdScoring = tr[i].getElementsByTagName("td")[4];
tdEarning = tr[i].getElementsByTagName("td")[3];
if (tdScoring || tdEarning) {
if (tdScoring.innerHTML.indexOf(scoring) == 0 && tdEarning.innerHTML.indexOf(earning) == 0) {
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-3 p0">
<div class="fixed-table-toolbar">
<div class="bars pull-left">
<div id="toolbar">
<select class="form-control input_billing" id="earning1">
<option value="">Earning</option>
<option value="100">100</option> <option value="150">150</option> <option value="250">250</option>
</select>
</div>
</div>
<div class="bars pull-left">
<div id="toolbar">
<select class="form-control input_billing" id="scoring1">
<option value="">Scoring</option>
<option value="70">70</option> <option value="90">90</option>
<option value="100">100</option>
</select>
</div>
</div>
<button id="filter" class="btn btn-success" style="margin-top:8px;" type="button">Filter</button>
</div>
</div>
<table class="table table-condensed" id="mastermindTable">
<thead>
<tr>
<th width="18%" align="left">Name</th>
<th width="26%" align="left">Email </th>
<th width="20%" align="left">Expertise</th>
<th width="16%" align="left">Earning</th>
<th width="16%" align="left">Scoring</th>
<th width="4%" align="left">Status</th>
</tr>
</thead>
<tbody id="mastermindTableBody">
<tr>
<td>Ammar</td>
<td>amr@gmail.com</td>
<td>PHP</td>
<td>100</td>
<td>70</td>
<td>Active</td>
</tr>
<tr>
<td>Arsnel</td>
<td>ars@gmail.com</td>
<td>Larave</td>
<td>150</td>
<td>90</td>
<td>Active</td>
</tr>
<tr>
<td>Abeera</td>
<td>abr@gmail.com</td>
<td>CI</td>
<td>250</td>
<td>110</td>
<td>InActive</td>
</tr>
</tbody>
</table>
您还可以提及另一种过滤表并实现此目的的简单方法。我只想用 jQuery 和 JS 来实现这一点,请不要插件。
解决方案
只需添加一个带有 No Record Found 消息和 display:none 的新 tr。jsfiddle 在这里:
<tr id="noRecordTR" style="display:none">
<td>No Record Found</td>
</tr>
JavaScript
if(hidden_rows==rows){
for (i = 2; i < tr.length; i++) {
tr[i].style.display = "none";
}
document.getElementById('noRecordTR').style.display = "";
}
推荐阅读
- nexus - 检查 Nexus 存储库中是否已存在文件并上传
- javascript - 如何使用 javascript 强制下拉列表表现得像列表框
- amazon-web-services - 识别已注册 Google 但尝试在 AWS Cognito 中使用电子邮件登录的用户
- api - 用于更新 Scopus 数据的 API
- xamarin.ios - libvlcsharp - iOS 转码不接受媒体选项参数
- bootloader - 英伟达杰森 TX2
- amazon-web-services - 是否可以允许多个 AWS CloudFront OAI 访问单个 S3 存储桶?
- java - Java Spring (Jackson) 对不存在、存在但为空、存在有值的注解
- python - 如何在 pandas 中根据 group by 进行过滤逻辑
- elasticsearch - ElasticSearch 不断被杀死