0

我有一个包含 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";
            }
          }
        }
      }

什么可能导致问题？

4

2 回答 2

1

问题是您正在使用toggle，而不是hide或show。搜索功能还会更改行的可见性。当您在 30 之后切换所有行时，搜索匹配的行将被隐藏，而未匹配的行将显示，因为您正在切换每一行。

因此，您应该根据状态更改显示更多/更少按钮以显式显示或隐藏行。

  $("#shower").on("click", function () {
      if ($("#shower").html() == "Show More") {
          $("#shower").attr("class", "btn btn-block btn-info");
          $("#shower").html("Show Less");
          $(".auto-collapse tr:gt(30)").show();
      } else {
          $("#shower").attr("class", "btn btn-block btn-primary");
          $("#shower").html("Show More");
          $(".auto-collapse tr:gt(30)").hide();
      }
  });
于 2018-10-05T15:04:18.547 回答
1

问题是您的搜索功能的逻辑：

  • 循环遍历每个tr
  • 没有值时， 30号后#myInput全部隐藏tr
  • 检查是否在#myInput当前tr的 s中找到了 的值td（并且在任何字符串中都找到了一个空字符串！）
  • 结论：最后一项在 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";
      }
    }
  }
}
于 2018-10-05T16:05:39.780 回答