默认情况下自动隐藏表格内容

Question

我在html表中有一个数据列表，我想要隐藏的内容好像它不包含任何数据一样。当用户输入匹配的关键字时，它将显示表格内容。

我需要了解如何根据自己的情况修改此javascript。

function myFunction() {
  const filter = document.querySelector('#myInput').value.toUpperCase();
  const trs = document.querySelectorAll('#myTable tr:not(.header)');
  trs.forEach(tr => tr.style.display = [...tr.children].find(td => td.innerHTML.toUpperCase().includes(filter)) ? '' : 'none');
}

编辑：我的HTML文件的来源 https://pastebin.com/cx0DtfDJ

Answer 1

如果您可以利用col标签，则使用纯JavaScript的解决方案非常简单：

<table id='id_of_table' border=1>
  <col class="col1"/>
  <col class="col2"/>
  <col class="col3"/>
  <col class="col4"/>
  <tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
  <tr><td>  2</td><td>   two</td><td>   xyz</td><td>     xyz</td></tr>
  <tr><td>  3</td><td> three</td><td>  xyz</td><td>     xyz</td></tr>
  <tr><td>  4</td><td>  four</td><td>xyz</td><td>     xyz</td></tr>  

</table>

您可以仅对几个CSS属性应用col，但是可见性就是其中之一

function show_hide_column(col_no, do_show) {
   var tbl = document.getElementById('id_of_table');
   var col = tbl.getElementsByTagName('col')[col_no];
   if (col) {
     col.style.visibility=do_show?"":"collapse";
   }
}