用 JS 过滤 HTML 列表

Question

我对HTML和JavaScript不是很熟悉，所以我的学习是基于逆向工程代码

我正在使用的代码根据修改后的关键字过滤 table 我还可以将此代码添加到按钮并过滤关键字我添加了一个非常原始的切换功能（很好切换无论如何）。但是，我不能让 table 将所有样式改回 style="Display = ""; 至少我不能让它们重新出现？

var myTog = 0;

function myFunction() {
  var ul, li, a, i, txtValue;

  if (myTog == 0) {
    myTog = 1;

    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.indexOf("Cindy") > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }

  } else {
    alert("test if toggel works");

    // ================
    // Trouble Section:
    // ================

    for (i = 0; i < li.length; i++) {
      li[i].style.display = "";
    }

    // ===============

    myTog = 0;
  }

}

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
<button type="button" onclick="myFunction()">Click Me!</button>

Answer 1

如果你想显示 li，那么你可以使用类似的东西：

li[i].style.display = "block";

Answer 2

您必须在 if 子句

之外定义 li = ul.getElementsByTagName("li");

var myTog = 0;

function myFunction() {
  var ul, li, a, i, txtValue;
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");

  if (myTog == 0) {
    myTog = 1;
    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.indexOf("Cindy") > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  } else {
    for (i = 0; i < li.length; i++) {
      li[i].style.display = "";
    }
    myTog = 0;
  }
}

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
<button type="button" onclick="myFunction()">Click Me!</button>

用 JS 过滤 HTML 列表

filter HTML list with JS

html

javascript

css

list

filter