Question

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

示例1：在过滤字符“ x”（不在任何td中）后，表行消失了 AND 标头行保留；很好在过滤字符'z'（在任何td中都不是）时，表行和表头DISAPPEARS都不好。

示例2：对“天井”的过滤（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>

Answer 1

确定3个不同的js函数正在产生冲突，将python代码合并到颜色代码行中，然后用无冲突代码替换了filter函数并解决了问题，并标记为关闭。

表格排序时，HTML标头行间歇性消失

1 个答案: