我尝试了以下问题的答案：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>
答案 0 :(得分：0)
您的代码正在过滤每一行，无需过滤标题行
使用：不选择器不选择搜索中的标题
<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>