Javascript 对表格排序时，HTML标题行间歇性消失
过滤时，表头会偶尔消失，无论用于过滤的字符是否在表行中，表头行都需要保留在原位 示例1：过滤字符“x”（不在任何td中）后，表行消失，标题行保留；这很好。在对字符“z”进行筛选后（不在任何td中），表行和表头消失，这是不好的 示例2：“天井”的过滤（a）“pa”的过滤和标题行消失，只显示结果行，这是不好的；（b） 使用“atio”进行筛选，同时显示表头行和表行结果行，这是所需的行为 “myFunction”是过滤器 我已经测试了MS Edge、Chrome、Safari和Firefox。html是从Python脚本生成的。我花了5个多小时排除故障Javascript 对表格排序时，HTML标题行间歇性消失,javascript,html,python-3.x,char,Javascript,Html,Python 3.x,Char,过滤时，表头会偶尔消失，无论用于过滤的字符是否在表行中，表头行都需要保留在原位 示例1：过滤字符“x”（不在任何td中）后，表行消失，标题行保留；这很好。在对字符“z”进行筛选后（不在任何td中），表行和表头消失，这是不好的 示例2：“天井”的过滤（a）“pa”的过滤和标题行消失，只显示结果行，这是不好的；（b） 使用“atio”进行筛选，同时显示表头行和表行结果行，这是所需的行为 “myFunction”是过滤器 我已经测试了MS Edge、Chrome、Safari和Firefox。html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
td {
width: 200px;
height: 60px;
}
th {
cursor: pointer;
}
.selected {
background-color: green;
}
.bad {
background-color: red;
}
</style>
</head>
<body>
<h2>Search Box Below</h2>
<input id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name" type="text">
<p style="font-size:30px">
Total tests: 10. Failed tests: 5. Skipped tests: 0.<br>
</p><p style="font-size:30px">
Report test time 0:00:00<br>
</p><table border="1" id="myTable">
<thead>
<tr style="">
<th>Facility</th>
<th>Test_group</th>
<th>Test_number</th>
<th>Description</th>
<th>Result</th>
<th>Execution_time</th>
<th>Information</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr class="bad" style=""><td>Shower</td><td>972</td><td>9</td><td>Horse</td><td>Fail</td><td>0:09:51</td><td>Maroon</td><td></td></tr><tr class="selected" style=""><td>Patio</td><td>323</td><td>8</td><td>Dog</td><td>Success</td><td>0:16:35</td><td>Maroon</td><td></td></tr><tr class="selected" style=""><td>Shower</td><td>88</td><td>7</td><td>Pig</td><td>Success</td><td>0:08:54</td><td>Red</td><td></td></tr><tr class="bad" style=""><td>Patio</td><td>226</td><td>6</td><td>Pig</td><td>Fail</td><td>0:05:38</td><td>Maroon</td><td></td></tr><tr class="bad" style=""><td>Kitchen</td><td>982</td><td>5</td><td>Cat</td><td>Fail</td><td>0:09:01</td><td>Blue</td><td></td></tr><tr class="selected" style=""><td>Patio</td><td>654</td><td>4</td><td>Dog</td><td>Success</td><td>0:01:57</td><td>Red</td><td></td></tr><tr class="bad" style=""><td>Patio</td><td>96</td><td>3</td><td>Mule</td><td>Fail</td><td>0:16:29</td><td>Purple</td><td></td></tr><tr class="selected" style=""><td>Den</td><td>844</td><td>2</td><td>Horse</td><td>Success</td><td>0:12:11</td><td>Red</td><td></td></tr><tr class="bad" style=""><td>Room</td><td>323</td><td>1</td><td>Horse</td><td>Fail</td><td>0:02:30</td><td>Purple</td><td></td></tr><tr class="selected" style=""><td>Den</td><td>830</td><td>0</td><td>Horse</td><td>Success</td><td>0:06:42</td><td>Brown</td><td></td></tr>
</tbody>
</table>
<script>
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
function myFunction() {
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
document.querySelectorAll('#myTable tr:not(.header)').forEach((tr) => {
const anyMatch = [...tr.children]
.some(td => td.textContent.toUpperCase().includes(inputStr));
if (anyMatch) tr.style.removeProperty('display');
else tr.style.display = 'none';
});
}
function resultFormatting() {
var rows = document.getElementById("myTable").getElementsByTagName('tr');
for (var i = 0; i < rows[0].children.length && rows[0].children[i].innerHTML !== "Result"; i++);
for (var j = 1; j < rows.length; j++) {
rows[j].classList.add(rows[j].children[i].innerHTML === "Success" ? 'selected' : 'bad');
}
};
resultFormatting();
</script>
</body></html>
运输署{
宽度：200px；
高度：60px；
}
th{
光标：指针；
}
.选定{
背景颜色：绿色；
}
.不好{
背景色：红色；
}
下面的搜索框
测试总数：10。未通过测试：5。跳过的测试：0。
报告测试时间0:00:00
设施
测试组
测试编号
描述
结果
执行时间
问询处
输出
淋浴9729马蹄铁0:09:51马蹄铁3238马蹄铁成功0:16:35马蹄铁887马蹄铁成功0:08:54红色部分2266马蹄铁成功0:05:38马蹄铁厨房9825马蹄铁失败0:09:01蓝色部分6544马蹄铁成功0:01:57红色部分8442马蹄铁成功0:12:11红色部分3231马蹄铁成功0:02:30紫色部分8300马蹄铁成功0:06:42棕色
const getCellValue=（tr，idx）=>tr.children[idx].innerText | | tr.children[idx].textContent；
常量比较器=（idx，asc）=>（a，b）=>（（v1，v2）=>
v1！=''&&v2！=''&&！isNaN（v1）和&！isNaN（v2）？v1-v2:v1.toString（）.localeCompare（v2）
)（getCellValue（asc？a:b，idx），getCellValue（asc？b:a，idx））；
document.queryselectoral（'th'）.forEach（th=>th.addEventListener（'click'），（（）=>{
常数表=第四个最近的（'表'）；
数组.from（table.querySelectorAll（'tr:n个子（n+2）'））
.sort（比较器（数组.from（th.parentNode.children）.indexOf（th），this.asc=！this.asc））
.forEach（tr=>table.appendChild（tr））；
})));
函数myFunction（）{
常量输入=document.getElementById（“myInput”）；
const inputStr=input.value.toUpperCase（）；
document.querySelectorAll（'#myTable tr:not（.header）'）.forEach（（tr）=>{
const anyMatch=[…tr.children]
.some（td=>td.textContent.toUpperCase（）.includes（inputStr））；
if（anyMatch）tr.style.removeProperty（'display'）；
else tr.style.display='none'；
});
}
函数resultFormatting（）{
var rows=document.getElementById（“myTable”）.getElementsByTagName（“tr”）；
对于（var i=0；itheadtbody