第一列滚动和表格过滤功能不同步答案

【问题标题】：First Column Scroll and Table Filter Function not Synchronized第一列滚动和表格过滤功能不同步
【发布时间】：2020-07-10 20:41:35
【问题描述】：

我有一段时间没有编码了，而且我对 javascript 比较陌生，所以如果这是一个愚蠢的问题，请道歉。

基本上，我为 HTML 表格编写了代码，该表格根据第一列中的项目过滤表格并且允许第一列和标题在表格溢出并且您必须滚动时保持固定.

我遇到的问题是，当您搜索一个项目时，它会起作用并显示出来，但是当您水平滚动时，第一列中的项目会恢复为第一列中的第一个项目。因此，例如，如果第一列按降序排列是 A、B、C 和 D，如果您搜索 D 然后水平滚动，则 A 出现在第一列中。

我相当卡住，任何帮助将不胜感激。谢谢！

这是我的代码：

$(function() {
  $('table').each(function() {
    if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
      // Clone <thead>
      var $w = $(window),
        $t = $(this),
        $thead = $t.find('thead').clone(),
        $col = $t.find('thead, tbody').clone();

      $t
        .addClass('sticky-enabled')
        .css({
          margin: 0,
          width: '100%'
        }).wrap('<div class="sticky-wrap" />');

      if ($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');

      $t.after('<table class="sticky-thead" />');

      if ($t.find('tbody th').length > 0) {
        $t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
      }

      var $stickyHead = $(this).siblings('.sticky-thead'),
        $stickyCol = $(this).siblings('.sticky-col'),
        $stickyInsct = $(this).siblings('.sticky-intersect'),
        $stickyWrap = $(this).parent('.sticky-wrap');

      $stickyHead.append($thead);

      $stickyCol
        .append($col)
        .find('thead th:gt(0)').remove()
        .end()
        .find('tbody td').remove();

      $stickyInsct.html('<thead><tr><th>' + $t.find('thead th:first-child').html() + '</th></tr></thead>');

      var setWidths = function() {
          $t
            .find('thead th').each(function(i) {
              $stickyHead.find('th').eq(i).width($(this).width());
            })
            .end()
            .find('tr').each(function(i) {
              $stickyCol.find('tr').eq(i).height($(this).height());
            });


          $stickyHead.width($t.width());


          $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
        },
        repositionStickyHead = function() {

          var allowance = calcAllowance();


          if ($t.height() > $stickyWrap.height()) {

            if ($stickyWrap.scrollTop() > 0) {

              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                top: $stickyWrap.scrollTop()
              });
            } else {

              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                top: 0
              });
            }
          } else {

            if ($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {

              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                top: $w.scrollTop() - $t.offset().top
              });
            } else {
              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                top: 0
              });
            }
          }
        },
        repositionStickyCol = function() {
          if ($stickyWrap.scrollLeft() > 0) {
            $stickyCol.add($stickyInsct).css({
              opacity: 1,
              left: $stickyWrap.scrollLeft()
            });
          } else {
            $stickyCol
              .css({
                opacity: 0
              })
              .add($stickyInsct).css({
                left: 0
              });
          }
        },
        calcAllowance = function() {
          var a = 0;

          $t.find('tbody tr:lt(3)').each(function() {
            a += $(this).height();
          });

          if (a > $w.height() * 0.25) {
            a = $w.height() * 0.25;
          }

          a += $stickyHead.height();
          return a;
        };

      setWidths();

      $t.parent('.sticky-wrap').scroll($.throttle(250, function() {
        repositionStickyHead();
        repositionStickyCol();
      }));

      $w
        .load(setWidths)
        .resize($.debounce(250, function() {
          setWidths();
          repositionStickyHead();
          repositionStickyCol();
        }))
        .scroll($.throttle(250, repositionStickyHead));
    }
  });
});



function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByClassName("headcol")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

  *,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#myInput {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

body {
  font-family: 'Lato', Arial, sans-serif;
  color: #3e5682;
  background: #f8f8f8;
}

a {
  color: #31bc86;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #8f8888;
}

.container>header {
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  background: rgba(0, 0, 0, 0.01);
}

.container>header h1 {
  font-size: 2.625em;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
}

.container>header span {
  display: block;
  font-size: 60%;
  opacity: 0.7;
  padding: 0 0 0.6em 0.1em;
}


/* To Navigation Style */

.codrops-top {
  background: #fff;
  background: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  width: 100%;
  font-size: 0.69em;
  line-height: 2.2;
}

.codrops-top a {
  text-decoration: none;
  padding: 0 1em;
  letter-spacing: 0.1em;
  display: inline-block;
}

.codrops-top a:hover {
  background: rgba(255, 255, 255, 0.95);
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  float: left;
  display: block;
}

.codrops-icon:before {
  font-family: 'codropsicons';
  margin: 0 4px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
  content: "\e001";
}

.codrops-icon-prev:before {
  content: "\e004";
}


/* Demo Buttons Style */

.codrops-demos {
  padding-top: 1em;
  font-size: 0.8em;
}

.codrops-demos a {
  display: inline-block;
  margin: 0.5em;
  padding: 0.7em 1.1em;
  outline: none;
  border: 2px solid #31bc86;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
  border-color: #7c8d87;
  color: #8f8888;
}

.related {
  text-align: center;
  font-size: 1.5em;
  padding-bottom: 3em;
}

@media screen and (max-width: 25em) {
  .codrops-icon span {
    display: none;
  }
}

@font-face {
  font-family: 'Blokk';
  src: url('../fonts/blokk/BLOKKRegular.eot');
  src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.component {
  line-height: 1.5em;
  margin: 0 auto;
  padding: 2em 0 3em;
  width: 90%;
  max-width: 1000px;
  overflow: hidden;
}

.component .filler {
  font-family: "Blokk", Arial, sans-serif;
  color: #d3d3d3;
}

table {
  border-collapse: collapse;
  margin-bottom: 3em;
  width: 100%;
  background: #fff;
}

td,
th {
  padding: 0.75em 1.5em;
  text-align: left;
}

td.err {
  background-color: #e992b9;
  color: #3e5682;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
}

th {
  background-color: white;
  font-weight: bold;
  color: #3e5682;
  white-space: nowrap;
}

tbody th {
  background-color: white;
}

tbody tr:nth-child(2n-1) {
  background-color: #f5f5f5;
  transition: all .125s ease-in-out;
}

tbody tr:hover {
  background-color: #b8b8b8;
}


/* For appearance */

.sticky-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  margin: 3em 0;
  width: 100%;
}

.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .125s ease-in-out;
  z-index: 50;
  width: auto;
  /* Prevent table from stretching to full size */
}

.sticky-wrap .sticky-thead {
  box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
  z-index: 100;
  width: 100%;
  /* Force stretch */
}

.sticky-wrap .sticky-intersect {
  opacity: 1;
  z-index: 150;
}

.sticky-wrap .sticky-intersect th {
  background-color: #666;
  color: #eee;
}

.sticky-wrap td,
.sticky-wrap th {
  box-sizing: border-box;
}


/* Not needed for sticky header/column functionality */

td.user-name {
  text-transform: capitalize;
}

.sticky-wrap.overflow-y {
  overflow-y: auto;
  max-height: 60vh;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

<div style="overflow-x:auto;">

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Letters.." title="Type in a letter">


  <table id="myTable">
    <thead>
      <tr>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="headcol">A</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">B</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">C</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">D</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">E</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">F</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">G</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">H</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">I</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">J</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">K</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">L</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">M</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>

    </tbody>

  </table>

【问题讨论】：

@ikiK 嗯，似乎并没有完全解决这个问题。当我搜索然后水平滚动时，第一列仍然恢复到原来的状态。不过感谢您的尝试，我真的很感激。
我没有改变任何东西，我只是编辑了问题以制作一个 sn-p/fiddle，正如你所说的那样，你不能。对每个人来说都更容易。我确实看了一眼，但现在没有更多时间，也从未使用过油门去抖动，所以说实话我不知道那里发生了什么。祝你好运。也许明天再试一次。但这有点太多代码了。您应该尝试找出问题所在。
好的，听起来不错，谢谢！

标签： javascript html jquery css

【解决方案1】：

搜索功能末尾的这条简单行将解决所有问题：

$("table.sticky-col * th.headcol").html(filter);

问题是您的粘性插件或其他插件会克隆您的原始表格并在 scrool 上创建自己的表格：

<table class="sticky-col" style="opacity: 1; left: 623px;">...

这就是在开发工具中可以看到的滚动显示的内容，通过定位该新表并将第一个 th.headcol 设置为来自搜索输入的过滤器值，它将满足您的需求。

编辑：

好吧，这并不是那么简单，它可以显示正确的后者，但是当搜索栏被清空时，当它们全部在滚动时再次显示时，它并没有在所有行中显示正确的后者。所以需要回滚。所以你需要这个：

        if (filter !== "") {
    $("table.sticky-col * th.headcol").each(function() {
    $(this).parent("tr").css("display", "");
      if ($(this).html() !== filter) {
        $(this).parent("tr").css("display", "none");
      }
    });
  } else {
    $("table.sticky-col * th.headcol").each(function() {
      $(this).parent("tr").css("display", "");
    });
  }

$(function() {
  $('table').each(function() {
    if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
      // Clone <thead>
      var $w = $(window),
        $t = $(this),
        $thead = $t.find('thead').clone(),
        $col = $t.find('thead, tbody').clone();

      $t
        .addClass('sticky-enabled')
        .css({
          margin: 0,
          width: '100%'
        }).wrap('<div class="sticky-wrap" />');

      if ($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');

      $t.after('<table class="sticky-thead" />');

      if ($t.find('tbody th').length > 0) {
        $t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
      }

      var $stickyHead = $(this).siblings('.sticky-thead'),
        $stickyCol = $(this).siblings('.sticky-col'),
        $stickyInsct = $(this).siblings('.sticky-intersect'),
        $stickyWrap = $(this).parent('.sticky-wrap');

      $stickyHead.append($thead);

      $stickyCol
        .append($col)
        .find('thead th:gt(0)').remove()
        .end()
        .find('tbody td').remove();

      $stickyInsct.html('<thead><tr><th>' + $t.find('thead th:first-child').html() + '</th></tr></thead>');

      var setWidths = function() {
          $t
            .find('thead th').each(function(i) {
              $stickyHead.find('th').eq(i).width($(this).width());
            })
            .end()
            .find('tr').each(function(i) {
              $stickyCol.find('tr').eq(i).height($(this).height());
            });


          $stickyHead.width($t.width());


          $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
        },
        repositionStickyHead = function() {

          var allowance = calcAllowance();


          if ($t.height() > $stickyWrap.height()) {

            if ($stickyWrap.scrollTop() > 0) {

              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                top: $stickyWrap.scrollTop()
              });
            } else {

              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                top: 0
              });
            }
          } else {

            if ($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {

              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                top: $w.scrollTop() - $t.offset().top
              });
            } else {
              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                top: 0
              });
            }
          }
        },
        repositionStickyCol = function() {
          if ($stickyWrap.scrollLeft() > 0) {
            $stickyCol.add($stickyInsct).css({
              opacity: 1,
              left: $stickyWrap.scrollLeft()
            });
          } else {
            $stickyCol
              .css({
                opacity: 0
              })
              .add($stickyInsct).css({
                left: 0
              });
          }
        },
        calcAllowance = function() {
          var a = 0;

          $t.find('tbody tr:lt(3)').each(function() {
            a += $(this).height();
          });

          if (a > $w.height() * 0.25) {
            a = $w.height() * 0.25;
          }

          a += $stickyHead.height();
          return a;
        };

      setWidths();

      $t.parent('.sticky-wrap').scroll($.throttle(250, function() {
        repositionStickyHead();
        repositionStickyCol();
      }));

      $w
        .load(setWidths)
        .resize($.debounce(250, function() {
          setWidths();
          repositionStickyHead();
          repositionStickyCol();
        }))
        .scroll($.throttle(250, repositionStickyHead));
    }
  });
});



function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  //console.log(filter);
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByClassName("headcol")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }

  if (filter !== "") {
    $("table.sticky-col * th.headcol").each(function() {
    $(this).parent("tr").css("display", "");
      if ($(this).html() !== filter) {
        $(this).parent("tr").css("display", "none");
      }
    });
  } else {
    $("table.sticky-col * th.headcol").each(function() {
      $(this).parent("tr").css("display", "");
    });
  }


}

  *,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#myInput {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

body {
  font-family: 'Lato', Arial, sans-serif;
  color: #3e5682;
  background: #f8f8f8;
}

a {
  color: #31bc86;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #8f8888;
}

.container>header {
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  background: rgba(0, 0, 0, 0.01);
}

.container>header h1 {
  font-size: 2.625em;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
}

.container>header span {
  display: block;
  font-size: 60%;
  opacity: 0.7;
  padding: 0 0 0.6em 0.1em;
}


/* To Navigation Style */

.codrops-top {
  background: #fff;
  background: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  width: 100%;
  font-size: 0.69em;
  line-height: 2.2;
}

.codrops-top a {
  text-decoration: none;
  padding: 0 1em;
  letter-spacing: 0.1em;
  display: inline-block;
}

.codrops-top a:hover {
  background: rgba(255, 255, 255, 0.95);
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  float: left;
  display: block;
}

.codrops-icon:before {
  font-family: 'codropsicons';
  margin: 0 4px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
  content: "\e001";
}

.codrops-icon-prev:before {
  content: "\e004";
}


/* Demo Buttons Style */

.codrops-demos {
  padding-top: 1em;
  font-size: 0.8em;
}

.codrops-demos a {
  display: inline-block;
  margin: 0.5em;
  padding: 0.7em 1.1em;
  outline: none;
  border: 2px solid #31bc86;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
  border-color: #7c8d87;
  color: #8f8888;
}

.related {
  text-align: center;
  font-size: 1.5em;
  padding-bottom: 3em;
}

@media screen and (max-width: 25em) {
  .codrops-icon span {
    display: none;
  }
}

@font-face {
  font-family: 'Blokk';
  src: url('../fonts/blokk/BLOKKRegular.eot');
  src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.component {
  line-height: 1.5em;
  margin: 0 auto;
  padding: 2em 0 3em;
  width: 90%;
  max-width: 1000px;
  overflow: hidden;
}

.component .filler {
  font-family: "Blokk", Arial, sans-serif;
  color: #d3d3d3;
}

table {
  border-collapse: collapse;
  margin-bottom: 3em;
  width: 100%;
  background: #fff;
}

td,
th {
  padding: 0.75em 1.5em;
  text-align: left;
}

td.err {
  background-color: #e992b9;
  color: #3e5682;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
}

th {
  background-color: white;
  font-weight: bold;
  color: #3e5682;
  white-space: nowrap;
}

tbody th {
  background-color: white;
}

tbody tr:nth-child(2n-1) {
  background-color: #f5f5f5;
  transition: all .125s ease-in-out;
}

tbody tr:hover {
  background-color: #b8b8b8;
}


/* For appearance */

.sticky-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  margin: 3em 0;
  width: 100%;
}

.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .125s ease-in-out;
  z-index: 50;
  width: auto;
  /* Prevent table from stretching to full size */
}

.sticky-wrap .sticky-thead {
  box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
  z-index: 100;
  width: 100%;
  /* Force stretch */
}

.sticky-wrap .sticky-intersect {
  opacity: 1;
  z-index: 150;
}

.sticky-wrap .sticky-intersect th {
  background-color: #666;
  color: #eee;
}

.sticky-wrap td,
.sticky-wrap th {
  box-sizing: border-box;
}


/* Not needed for sticky header/column functionality */

td.user-name {
  text-transform: capitalize;
}

.sticky-wrap.overflow-y {
  overflow-y: auto;
  max-height: 60vh;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

<div style="overflow-x:auto;">

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Letters.." title="Type in a letter">


  <table id="myTable">
    <thead>
      <tr>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
        <th>Something</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="headcol">A</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">B</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">C</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">D</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">E</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">F</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">G</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">H</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">I</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">J</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">K</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">L</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <th class="headcol">M</th>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>

    </tbody>

  </table>

【讨论】：

我才意识到它是如此接近。如果仍然是一个字母（“A”“B”“C”...），它会很好地工作。如果我开始添加具有多个字符（例如“AZ”）的字符，然后进行搜索，则粘性列将停止工作。有什么想法吗？
@user1580462 这是不同的问题，与提出的问题无关。如您的问题 sn-p.我从这个问题中解决了你的问题。我为此浪费了几个小时，所以请随意就您刚刚注意到的这个“新”问题提出另一个问题，也许其他人有更多时间。您从中删除已解决的复选标记也不好，我花了数小时和精力解决它，并且确实解决了所要求的问题。您不能只为问题添加新功能。
@user1580462 澄清一下，这个新问题与粘性无关，它与您的搜索逻辑有关，粘性部分仅对我看到的滚动做出反应。当你只搜索 AB 时，它不会带来任何结果。这就是你编码的方式。因为它在一列中搜索 AZ。不是，A 或 Z。
啊，好吧，对不起。我会再次检查。再说一次，我没怎么用过这个网站。我想我不了解它的适当礼仪。