时间戳

首页 > 解决方案 > 显示更多 - 显示更少显示 31 行而不是 30

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

问题描述

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

什么可能导致问题？

标签： javascriptjquery

解决方案

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

推荐阅读