First Column Scroll and Table Filter Function not Synchronized

Question

I haven't coded in a while, and I'm relatively new to javascript, so apologies if this is a dumb question.

Basically, I wrote code for an HTML table that filters the table based on items in the first column and allows both the first column and header to remain fixed if the Table overflows and you have to scroll.

The problem I'm having is that when you search for an item, it works and shows up, but then when you scroll horizontally, the item in the first column reverts to the very first item in the first column. So, for example, if the first column is, in descending order, A, B, C, and D, if you search D and then scroll horizontally, A appears in the first column.

I'm fairly stuck and any help would be much appreciated. Thank you!

Here's my code:

$(function() {
  $('table').each(function() {
    if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
      // Clone 
      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('');

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

      $t.after('');

      if ($t.find('tbody th').length > 0) {
        $t.after('
');
      }

      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('');

      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:





  


  
' + $t.find('thead th:first-child').html() + '


    
      
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
      
    
    
      
        A
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        B
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        C
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        D
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        E
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        F
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        G
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        H
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        I
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        J
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        K
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        L
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        M
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1

user_7158959 · Answer

This simple line on end of your search function will fix everything:

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

Problem was that your sticky plugin or what ever it is, clones your original table and makes its own on scrool:

...
and that is what is shown on scroll as can been seen in dev tools, by targeting that new table and setting first th.headcol to your filter value from search input it will do what you need.
EDIT:
Well it was not that simple, it worked to show correct latter but when search bar was emptied it wasn't showing correct latter in all rows when they were all shown again on scroll. So it needs to be reverted back. So you need this:
        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 

      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('');

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

      $t.after('




');

      if ($t.find('tbody th').length > 0) {
        $t.after('
');
      }

      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('');

      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:





  


  
' + $t.find('thead th:first-child').html() + '


    
      
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
        Something
      
    
    
      
        A
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        B
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        C
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        D
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        E
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        F
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        G
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        H
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        I
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        J
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        K
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        L
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
      
      
        M
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1

First Column Scroll and Table Filter Function not Synchronized

1 Answers