Bumped by Community user

occurred Sep 19, 2023 at 0:05

Bumped by Community user

occurred May 21, 2023 at 23:06

Bumped by Community user

occurred Jan 21, 2023 at 23:04

Bumped by Community user

occurred Sep 23, 2022 at 23:03

Bumped by Community user

occurred May 26, 2022 at 22:07

edited tags

Link

edited Apr 26, 2022 at 21:24

200_success

144.2k
22
188
473

Bumped by Community user

occurred Apr 26, 2022 at 21:00

Bumped by Community user

occurred Dec 27, 2021 at 21:00

Bumped by Community user

occurred Aug 29, 2021 at 20:04

Bumped by Community user

occurred May 1, 2021 at 19:09

Bumped by Community user

occurred Jan 1, 2021 at 18:03

Grammatical errors fix and text formatting

Source Link

edit approved Nov 24, 2020 at 13:19

Zoran Jankov

739
2
7
26

I wrote a code for sticky/fixed table header. I am bit confused with my coding, though it does my job. I know there are many jQuery codes available online. But I wanted to do it in plain jsJS with ieIE support. Now I want to see is there anything wrong/abuse of langugelanguage in my code. Here my code:

Here my code:

Source Link

asked Nov 24, 2020 at 12:27

abjim

21
4

Sticky Table Header in Plain JS

I wrote a code for sticky/fixed table header. I am bit confused with my coding, though it does my job. I know there are many jQuery codes available online. But I wanted to do it in plain js with ie support. Now I want to see is there anything wrong/abuse of languge in my code. Here my code:

/* Sticky table header starts here */

  var table = document.getElementsByTagName("table");
  table = [].slice.call(table);
  var clonedTable = [];

  document.addEventListener("DOMContentLoaded", function () {
    for (i = 0; i < table.length; i++) {
      function init() {
        var wrapper = document.createElement("div"),
          clone = table[i].cloneNode(true),
          parent = table[i].parentNode;
        clone.classList.add("fixed");
        wrapper.classList.add("container");

        for (let j = 0; j < clone.tBodies.length; j++) {
          clone.removeChild(clone.tBodies[j]);
        }
        wrapper.appendChild(clone);
        parent.insertBefore(wrapper, table[i]);
        wrapper.appendChild(table[i]);
        clonedTable.push(clone);

        resizeFixed();
      }

      function resizeFixed() {
        var ths = this.clonedTable[i].querySelectorAll('th'),
          ths2 = table[i].querySelectorAll('th');
        for (var u = 0; u < ths.length; u++) {
          ths[u].style.width = ths2[u].offsetWidth + 'px';
        }
      }

      init();
    }

  });

  window.addEventListener('resize', function () {
    for (let t = 0; t < clonedTable.length; t++) {
      var ths = this.clonedTable[t].querySelectorAll('th'),
        ths2 = table[t].querySelectorAll('th');
      for (var u = 0; u < ths.length; u++) {
        ths[u].style.width = ths2[u].offsetWidth + 'px';
      }
    }
  });

  window.addEventListener('scroll', function () {
    var offset = this.pageYOffset;
    for (var n = 0; n < table.length; n++) {
      var tableOffsetTop = table[n].offsetTop,
          tableOffsetBottom = tableOffsetTop + table[n].offsetHeight - table[n].tHead.offsetHeight;

      if (offset < tableOffsetTop || offset > tableOffsetBottom)
        clonedTable[n].style.display = 'none';

      else if (offset >= tableOffsetTop && offset <= tableOffsetBottom)
        clonedTable[n].style.display = 'table';
    }
  });  // working fine till now

  /* sticky table header script ends here */

body {
  font: 1.2em normal Arial, sans-serif;
  color: #34495E;
  text-align: center;
}

.container {
  width: 90%;
  margin: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #eee;
}

th,
td {
  text-align: center;
  padding: 5px 0;
}

.blue {
  border: 2px solid #1ABC9C;
}

.blue thead {
  background-color: #1ABC9C;
}

.purple {
  border: 2px solid #9B59B6;
}

.purple thead {
  background: #9B59B6;
}

thead {
  color: white;
}

th,
td {
  text-align: center;
  padding: 5px 0;
}

tbody tr:hover {
  background: #f1f5f7;
  /* color:#FFFFFF; */
}

.fixed {
  top: 0;
  position: fixed;
  width: auto;
  display: none;
  border: none;
}

<table class="purple">
  <thead>
    <th>Colored Text</th>
    <th>Color Preview</th>
    <th>Color Name</th>
    <th>Hex Value</th>
    <th>RGB Value</th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
  </tbody>
</table>
<br>
<hr>
<br>
<table class="blue">
  <thead>
    <th>Colored Text</th>
    <th>Color Preview</th>
    <th>Color Name</th>
    <th>Hex Value</th>
    <th>RGB Value</th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Fuscia</td>
      <td>#f1a4b1</td>
      <td>102, 74, 51</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Print</td>
      <td>#ea12fb</td>
      <td>41, 45, 21</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Pink</td>
      <td>#aa12fa</td>
      <td>55, 84, 100</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Gold</td>
      <td>#abcdef</td>
      <td>120, 210, 43</td>
    </tr>
  </tbody>
</table>

javascript

Stack Exchange Network

Return to Question

Here my code:

Here my code:

Sticky Table Header in Plain JS