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

Question

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

var input, table, rows, markInstance;

window.onload = function init() {
  input = document.getElementById("myInput");
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  clear();
}

function ContactsearchFX() {

  clear();

  if (input.value.length == 0) return;

  filterRows(input.value);
  highlightMatches(input.value);
}

function clear() {
  markInstance.unmark();

  for (var i = 0; i < rows.length; i++) {
    rows[i].style.display = 'none';
  }
}

function filterRows(text) {
  var part = text.toUpperCase();

  for (i = 0; i < rows.length; i++) {
    var row = rows[i];
    var td = row.getElementsByTagName("td")[0];

    if (td) {
      // part = GI
      // innerHtml = <MARK DATA-MARKJS="TRUE">G</MARK>ITHUB (wont match)
      // innerText = GITHUB (will match)
      var content = td.innerText.toUpperCase();

      if (content.includes(part)) {
        row.style.display = "";
      }
    }
  }
}

function highlightMatches(text) {
  markInstance.mark(text);
}

.input-wrap {
  margin-bottom: 12px;
}

.hints {
  display: none;
  margin-top: 12px;
}

#myInput:invalid~.hints {
  display: block;
}

mark {
  background: orange;
  font-weight: bold;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.js"></script>

<div class="input-wrap">
  <label>
        Search Titles: 
        <input id="myInput" type="text" required 
               onkeyup="ContactsearchFX()" 
               placeholder="Search Titles" />
    
        <span class="hints">
          Hints: type "title", "details"...
        </span>
      </label>
</div>

<table id="myTable" style="width: 100%" class="style1">
  <tr> -+- THIS IS WHERE I INSERT MY DATA TABLE -+-
    <th>Title</th>
    <th>Details</th>
  </tr>
  <tr>
    <td>*</td>
    <td>*</td>
  </tr>
  <tr>
    <td>*</td>
    <td>*</td>
  </tr>
  <tr>
    <td>*</td>
    <td>*</td>
  </tr>
</table>

Answer 1

如果我理解得很好，您可以使用如下简单的 CSS 类隐藏它:

HTML

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

CSS

.hide {
  display: none;
}

JS

// 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'
}

在这里您可以查看一个工作示例:https://jsfiddle.net/0antxeum/

希望这对您有所帮助，或者至少能为您指明正确的方向:)