javascript - 显示更多 - 显示更少显示 31 行而不是 30 行

Question

我有一个包含 370 行的 html 表格，并且还有一个“显示更多 - 显示更少”按钮，默认情况下仅显示前 30 行。在我添加搜索功能之前它运行得非常完美。

我从 w3schools 那里得到了它，效果很好。我添加了一些功能，因此当有人输入某些内容时，我的“淋浴”按钮就会消失。当输入干净后，它会再次出现。

问题是当我输入某些内容并将其删除时，它显示 31 行 + 我的按钮，而不是 30 行。此外，它还显示前 30 行 + 最后一行。

显示更多/显示更少:

$('.auto-collapse').find('tr:gt(30)').hide();

  $("#shower").on("click", function () {
      if ($("#shower").html() == "Show More") {
          $("#shower").attr("class", "btn btn-block btn-info");
          $("#shower").html("Show Less");
      } else {
          $("#shower").attr("class", "btn btn-block btn-primary");
          $("#shower").html("Show More");
      }
      $('.auto-collapse').find('tr:gt(30)').toggle();
  });

搜索功能:

function searchFunction() {
        var input, filter, table, tr, td1, td2, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("pairs");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
          td1 = tr[i].getElementsByTagName("td")[1];
          td2 = tr[i].getElementsByTagName("td")[2];
          if (input.value.length > 0) {
            $("#shower").css("display", "none");
          } else {
            $('.auto-collapse').find('tr:gt(30)').hide();
            $("#shower").css("display", "block");
          }
          if (td1 || td2) {
            if (td1.innerHTML.toUpperCase().indexOf(filter) > -1 || td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }

什么可能导致问题？

Answer 1

问题在于您的搜索功能的逻辑:

• 循环每个tr
• 当#myInput没有值时，隐藏第30个之后的所有tr
• 检查当前tr的td中是否找到了#myInput的值(并且在任意一个中都找到了空字符串)字符串!)
• 结论:最后一项被设置为可见之后，它被隐藏为第 30 条以上的 tr，并且您在循环内执行的操作可能会导致仅在循环外执行一次(并且所有先前的项目都被循环的下一次迭代隐藏!)

您的搜索功能应该更像这样:

function searchFunction() {
  // first, check if we have an input: if not, just reset the list
  var input = document.getElementById("myInput");
  if (!input.value.length) {
    $('.auto-collapse').find('tr').show(); // force all to show
    $('.auto-collapse').find('tr:gt(30)').hide(); // then hide what we want
    // don't forget to reset #shower's text to 'Show More'
    // (should be in another function and shared between here and #shower.onClick)
    $("#shower").html("Show More");
    $("#shower").css("display", "block");
    return; // stop right here, we don't want to execute a search (input is empty)
  }
  // now only in case of a search, we disable #shower and we select which line to show
  $("#shower").css("display", "none");
  var filter, table, tr, td1, td2, i;
  filter = input.value.toUpperCase();
  table = document.getElementById("pairs");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td1 = tr[i].getElementsByTagName("td")[1];
    td2 = tr[i].getElementsByTagName("td")[2];
    if (td1 || td2) {
      if (td1.innerHTML.toUpperCase().indexOf(filter) > -1 || td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}