javascript - JavaScript 表格在加载/刷新时闪烁。我怎样才能避免这种情况发生？

Question

我已经成功地将这个代码片段与我的数据表集成在一起。唯一的问题是，在页面加载或刷新时，屏幕上的所有表格似乎都在闪烁，甚至在输入任何搜索/过滤/查询词之前。已尝试使用 CSS 隐藏/显示以及在 JAVASCRIPT 和 HTML 中显示结果的变体，但没有最终修复。我很想知道如何解决这个问题并保持 mark.js 突出显示效果。

JAVASCRIPT

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

  var content = td.innerText.toUpperCase();

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

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

CSS

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

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

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

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

HTML

<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 "git", "bit", "forge" ...
    </span>
  </label>
</div>

<table id="myTable" style="width: 100%" class="style1">
    <tr>
        <td> * DATA <TABLES> NESTED IN HERE *
</td>
    </tr>
      </table>

ps用mark.js没问题

标签： javascript