表格排序时 HTML 标题行间歇性消失答案

【问题标题】：HTML header row intermittently disappears when table sorted表格排序时 HTML 标题行间歇性消失
【发布时间】：2019-01-14 00:31:37
【问题描述】：

过滤时表格标题偶尔会消失，无论用于过滤的字符是否在表格行中，表格标题行都需要保留在原位。

示例 1：在过滤字符“x”（不在任何 td 中）时，表格行消失 AND 标题行保留；这很好。在过滤字符“z”时，（不在任何 td 中）表行和表头消失，这很糟糕。

示例 2：过滤 'patio' (a) 过滤 'pa' 和标题行消失，只显示结果行，这很糟糕； (b) 使用 'atio' 进行过滤，同时显示表格标题行和表格行结果行，这是所需的行为。

'myFunction' 是过滤器

我已经测试过 MS Edge、Chrome、Safari 和 Firefox。 html 是从 Python 脚本生成的。我已经花了 +5 个小时进行故障排除。

<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>

【问题讨论】：

查看创建minimal reproducible example。我们需要对代码进行某种类型的调试，否则我们只是在盲目猜测。
好的，稍后补充，抱歉，我明白了。
@fjm 好的，很快就会添加 - 这样做。我看到你质疑获得“接近”选票。
我会将标题行放在thead 中，并且只对tbody 中的数据进行操作。
@TobiasK 谢谢您，进行了更改，但过滤器行为保持不变，使用我记下的相同示例。

标签： javascript html python-3.x char

【解决方案1】：

确定 3 个不同的 js 函数正在创建冲突，将 python 代码合并到颜色代码行然后用非冲突代码替换过滤器函数并解决问题，标记为关闭。

【讨论】：