javascript - 我可以从一开始就隐藏一张 table 吗？

Question

我在将此代码片段与我的数据表集成方面取得了一些成功。

唯一的问题是，在加载或刷新页面时，甚至在输入任何搜索/过滤/查询词之前，屏幕上的所有表格似乎都在闪烁。

我尝试过将 hide/show 与 CSS 一起使用，并尝试在 JavaScript 和 HTML 中显示结果的变体，但没有最终解决办法。我很想知道如何解决这个问题并保持 mark.js 高亮有效，With-in 一个例子。

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);
}

.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 "POINT AT WHERE DATA TABLES ARE"...
    </span>
  </label>
</div>

<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>
      <TABLE>
        <tr>
          <td>POINT AT WHERE DATA TABLES ARE INSEED</td>
        </tr>
      </TABLE>
  </tr>
</table>

Answer 1

我想我看到了你提到的问题，我相信我有适合你的解决方案。我认为问题的发生是因为 JavaScript 需要一瞬间的时间来执行和设置 <tr>在你的 table 上 display: none; .所以我改变了你的<tr>成为<tr style="display:none;">从一开始。在下面的示例中尝试一下。

继续单击“运行代码”以模拟加载您的页面。我没有像在包含的示例中看到的那样看到一闪而过的文字。

/* */
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);
}
//*/

.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 "POINT AT WHERE DATA TABLES ARE"...
    </span>
  </label>
</div>

<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>
      <TABLE>
        <tr style="display: none">
          <td>POINT AT WHERE DATA TABLES ARE INSEED</td>
        </tr>
      </TABLE>
  </tr>
</table>