CSS/JavaScript表行/数据显示和隐藏不适用于我的数据表。？

我尝试将代码片段集成到数据表页面中，并取得了一些成功。只有CSS/JavaScript表行/数据显示和隐藏不适用于我的数据表。失去了想法，但希望在混合中保持mark.js突出显示，效果很好

变量输入、表、行、标记实例； window.onload=函数初始化{ 输入=document.getElementByIdmyInput； table=document.getElementById'myTable'； 行=table.querySelectorAll'tr'； markInstance=新的Marktable； 清楚的 } 函数ContactsearchFX{ 清楚的 如果input.value.length==0，则返回； filterRowsinput.value； highlightMatchesinput.value； } 功能清晰{ markInstance.unmark； 对于变量i=0；i如果我很了解您，您可以使用如下简单的CSS类来隐藏它：

HTML

JS

在这里，您可以查看一个工作示例：

---

希望此帮助或至少为您指出正确的方向：

请提供完整的工作代码，同时提供表格内容，因为代码太多，无法显示。这一点对Alessio有帮助吗？欢迎来到这里，如果我理解你的意思，你想根据你键入的内容突出显示表格中的文本，是吗？是的，Gengns，这就是Im at-mark.js处理这一部分的方式。我的问题是显示、隐藏和显示过滤后的数据表信息，不确定这是CSS问题还是JavaScript问题。我能提供更多的信息吗？方向正确，谢谢Gengns。混合中只需要mark.js？

<input placeholder="Type title">
<table>
  <tr class="hide">
    <th>Title</th>
    <th>Details</th>
  </tr>
  <tr class="hide">
    <td>Aladdin</td>
    <td>Nice</td>
  </tr>
  <tr class="hide">
    <td>Inception</td>
    <td>Cool</td>
  </tr>
  <tr class="hide">
    <td>Fight Club</td>
    <td>Great</td>
  </tr>
</table>

.hide {
  display: none;
}

// Selectors
const $input = document.querySelector('input')
const $heads = document.querySelector('tr:first-of-type')
const $titles = document.querySelectorAll('td:first-of-type')


$input.oninput = () => {
  // Num titles shown
  let num = 0
  // Find titles and show rows
  $titles.forEach($t => {
    const found = $input.value && 
      $t.textContent.toUpperCase().includes($input.value.toUpperCase())

    $t.parentElement.className =  found ? '' : 'hide'
    if (found) num++  
  })
  // Show header
  $heads.className = num ? '': 'hide'
}