La función de filtro de tabla y desplazamiento de la primera columna no está sincronizada

2
user1580462 2020-07-06 12:36.

No he codificado en un tiempo, y soy relativamente nuevo en javascript, así que disculpas si esta es una pregunta tonta.

Básicamente, escribí código para una tabla HTML que filtra la tabla en función de los elementos de la primera columna y permite que tanto la primera columna como el encabezado permanezcan fijos si la tabla se desborda y tiene que desplazarse.

El problema que tengo es que cuando buscas un elemento, funciona y aparece, pero luego, cuando te desplazas horizontalmente, el elemento de la primera columna vuelve al primer elemento de la primera columna. Entonces, por ejemplo, si la primera columna es, en orden descendente, A, B, C y D, si busca D y luego se desplaza horizontalmente, A aparece en la primera columna.

Estoy bastante atascado y cualquier ayuda sería muy apreciada. ¡Gracias!

Aquí está mi código:

$(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>

javascript html jquery css

1 answers

1
ikiK 2020-07-11 00:54.

Esta simple línea al final de su función de búsqueda arreglará todo:

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

El problema fue que su complemento pegajoso o lo que sea, clona su tabla original y hace la suya propia en scrool:

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

y eso es lo que se muestra en el desplazamiento, como se puede ver en las herramientas de desarrollo, al apuntar a esa nueva tabla y configurar primero th.headcolel valor de filtro desde la entrada de búsqueda, hará lo que necesita.

EDITAR:

Bueno, no fue tan simple, funcionó para mostrar el último correcto, pero cuando se vació la barra de búsqueda, no mostraba el último correcto en todas las filas cuando se mostraban nuevamente en el desplazamiento. Por lo tanto, debe revertirse. Entonces necesitas esto:

        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>

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

2022-12-22.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

2022-12-14.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

2022-12-09.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

2022-12-07.

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los inodoros arrojan columnas de aerosol invisibles con cada descarga. ¿Como sabemos? La prueba fue capturada por láseres de alta potencia.

2022-12-09.

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

2022-09-02.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

2022-07-29.

¿Caduca el repelente de insectos?

¿Caduca el repelente de insectos?

¿Sigue siendo efectivo ese lote de repelente de insectos que te quedó del verano pasado? Si es así, ¿por cuánto tiempo?

2022-06-08.

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Tapas elásticas de silicona de Tomorrow's Kitchen, paquete de 12 | $14 | Amazonas | Código promocional 20OFFKINJALids son básicamente los calcetines de la cocina; siempre perdiéndose, dejando contenedores huérfanos que nunca podrán volver a cerrarse. Pero, ¿y si sus tapas pudieran estirarse y adaptarse a todos los recipientes, ollas, sartenes e incluso frutas en rodajas grandes que sobran? Nunca más tendrás que preocuparte por perder esa tapa tan específica.

2022-11-02 18:37.

Cuéntanos tus mejores trucos de Washington, DC

Cuéntanos tus mejores trucos de Washington, DC

Hemos pirateado algunas ciudades industriales en esta columna, como Los Ángeles y Las Vegas. Ahora es el momento de una ciudad militar-industrial-compleja.

2022-10-29 00:57.

Un minorista está eliminando su sección de tallas grandes y mezclando tallas más grandes con todo lo demás

Un minorista está eliminando su sección de tallas grandes y mezclando tallas más grandes con todo lo demás

Un minorista está enlatando su sección de tallas grandes. Pero no están tomando la categoría solo en línea o descontinuándola por completo.

2022-10-27 14:49.

La mejor forma de guardar animales de peluche es dentro de un puf

La mejor forma de guardar animales de peluche es dentro de un puf

Entiendo totalmente, completamente si tienes una relación difícil con los animales de peluche. Son lindos, tienen valor sentimental y es difícil separarse de ellos.

2022-10-27 04:30.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

2023-02-03.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

2023-02-03.

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

El jueves se presentó una denuncia de delito menor amenazante agravado contra Joe Mixon.

2023-02-03.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

2023-02-03.

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

India me está pateando el culo

India me está pateando el culo

Estoy de vuelta por primera vez en seis años. No puedo decirte cuánto tiempo he estado esperando esto.

Precios accesibles, nuestro aprendizaje desde la perspectiva iOS

Precios accesibles, nuestro aprendizaje desde la perspectiva iOS

Cómo mejoramos la accesibilidad de nuestro componente de precio, y cómo nos marcó el camino hacia nuevos saberes para nuestro sistema de diseño. Por Ana Calderon y Laura Sarmiento Leer esta historia en inglés.

ℝ

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

Language

Japanese
Spanish
German
French
Thai
Portuguese
Russian
Vietnamese
Italian
Korean
Turkish
Indonesian
Polish
Hindi