表头在搜索后丢失
表头在搜索后丢失
提问于 2017-10-27 05:38:27
我尝试了以下问题的答案：Search Field on multiple indexes in a html table using java-script
它确实起作用了，但出于某种原因，它在函数运行后一直隐藏头部。有什么建议吗？
<style type="text/css">* {
box-sizing: border-box;
}
input[type=text] {
width: 230px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/css/searchicon.png');
text-align: center;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
input[type=text]:focus {
width: 100%;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
<p align="center"><font color="#124e72" face="Effra" size="7">Report Portal</font></p>
<p style="text-align: center;"><input id="myInput" onkeyup="myFunction()" placeholder="Search for reports.." title="Type in a name" type="text" /></p>
<p> </p>
<p> </p>
<table id="myTable">
<tbody>
<tr class="header">
<th style="width:40%">Title</th>
<th style="width:20%">Validation Status</th>
<th style="width:20%">Report Type</th>
<th style="width:10%">Open Report</th>
<th style="width:10%">Info</th>
<th style="display:none">Functional Owner</th>
<th style="display:none">Developed In</th>
<th style="display:none">Category</th>
<th style="display:none">Validation Assessment</th>
<th style="display:none">Implementation Plan</th>
<th style="display:none">Implementation Report</th>
<th style="display:none">Intended Use</th>
</tr>
<tr>
<td>Scrap Report</td>
<td>Validated</td>
<td>Business Objects</td>
<td><a href="http://www.google.com" target="_blank">Open</a></td>
<td>(i)</td>
<td style="display:none">Ops</td>
<td style="display:none">Spotfire</td>
<td style="display:none">Scrap</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">The intended use of this report is to identify the Scrap Cost by Reason at manufacturing processing steps by part number and date range. This data could be used to determine where process improvements can be made; and used for PFMEA calculations and PRB decisions/documentation.</td>
</tr>
<tr>
<td>Training xReport</td>
<td>Validated</td>
<td>Business Objects</td>
<td><a href="http://www.google.com" target="_blank">Open</a></td>
<td>(i)</td>
<td style="display:none">Ops</td>
<td style="display:none">Spotfire</td>
<td style="display:none">Scrap</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">The intended use of this report is to identify the Scrap Cost by Reason at manufacturing processing steps by part number and date range. This data could be used to determine where process improvements can be made; and used for PFMEA calculations and PRB decisions/documentation.</td>
</tr>
<tr>
<td>Rty Report</td>
<td>Validated</td>
<td>Business Objectszzz</td>
<td><a href="http://www.google.com" target="_blank">Open</a></td>
<td>(i)</td>
<td style="display:none">Ops</td>
<td style="display:none">Spotfire</td>
<td style="display:none">Scrap</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">kalam</td>
<td style="display:none">The intended use of this report is to identify the Scrap Cost by Reason at manufacturing processing steps by part number and date range. This data could be used to determine where process improvements can be made; and used for PFMEA calculations and PRB decisions/documentation.</td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, ii;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.querySelectorAll("tbody tr");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
var found = false;
for (ii = 0; ii < tds.length && !found; ii++) {
if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
tr[i].style.display = found?"":"none";
}
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-27 05:48:39
您的代码正在过滤每一行--不需要过滤标题行。
使用: not 选择器不选择搜索中的标题
<style type="text/css">* {
box-sizing: border-box;
}
input[type=text] {
width: 230px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/css/searchicon.png');
text-align: center;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
input[type=text]:focus {
width: 100%;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
<p align="center"><font color="#124e72" face="Effra" size="7">Report Portal</font></p>
<p style="text-align: center;"><input id="myInput" onkeyup="myFunction()" placeholder="Search for reports.." title="Type in a name" type="text" /></p>
<p> </p>
<p> </p>
<table id="myTable">
<tbody>
<tr class="header">
<th style="width:40%">Title</th>
<th style="width:20%">Validation Status</th>
<th style="width:20%">Report Type</th>
<th style="width:10%">Open Report</th>
<th style="width:10%">Info</th>
<th style="display:none">Functional Owner</th>
<th style="display:none">Developed In</th>
<th style="display:none">Category</th>
<th style="display:none">Validation Assessment</th>
<th style="display:none">Implementation Plan</th>
<th style="display:none">Implementation Report</th>
<th style="display:none">Intended Use</th>
</tr>
<tr>
<td>Scrap Report</td>
<td>Validated</td>
<td>Business Objects</td>
<td><a href="http://www.google.com" target="_blank">Open</a></td>
<td>(i)</td>
<td style="display:none">Ops</td>
<td style="display:none">Spotfire</td>
<td style="display:none">Scrap</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">The intended use of this report is to identify the Scrap Cost by Reason at manufacturing processing steps by part number and date range. This data could be used to determine where process improvements can be made; and used for PFMEA calculations and PRB decisions/documentation.</td>
</tr>
<tr>
<td>Training xReport</td>
<td>Validated</td>
<td>Business Objects</td>
<td><a href="http://www.google.com" target="_blank">Open</a></td>
<td>(i)</td>
<td style="display:none">Ops</td>
<td style="display:none">Spotfire</td>
<td style="display:none">Scrap</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">The intended use of this report is to identify the Scrap Cost by Reason at manufacturing processing steps by part number and date range. This data could be used to determine where process improvements can be made; and used for PFMEA calculations and PRB decisions/documentation.</td>
</tr>
<tr>
<td>Rty Report</td>
<td>Validated</td>
<td>Business Objectszzz</td>
<td><a href="http://www.google.com" target="_blank">Open</a></td>
<td>(i)</td>
<td style="display:none">Ops</td>
<td style="display:none">Spotfire</td>
<td style="display:none">Scrap</td>
<td style="display:none">R12345</td>
<td style="display:none">R12345</td>
<td style="display:none">kalam</td>
<td style="display:none">The intended use of this report is to identify the Scrap Cost by Reason at manufacturing processing steps by part number and date range. This data could be used to determine where process improvements can be made; and used for PFMEA calculations and PRB decisions/documentation.</td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, ii;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.querySelectorAll("tbody tr:not(.header)");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
var found = false;
for (ii = 0; ii < tds.length && !found; ii++) {
if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
tr[i].style.display = found?"":"none";
}
}
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46968177
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号