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

问题是您使用的是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();
      }
  });

Answer 2

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

遍历每个tr
如果#myInput没有值，请在30号之后隐藏所有tr
检查是否在当前#myInput的{{1}}中找到了tr的值（并且在任何字符串中都找到了空字符串！）
结论：最后一项设置为在之后可见，它在第30条上方被隐藏为td，并且您正在循环中执行某些操作，该操作只能一次退出循环（并且循环的 next 迭代隐藏了所有先前的项！）

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

tr

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

2 个答案: