Sticky Table Header in Plain JS

Question

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 language 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>

Answer 1

Some of the things I've noticed:

• Avoid global variables
• It's a good decision to avoid var keyword as the variable declaration in 2020. Read about let and const
• Some of the variables could be more descriptive
• Use classes instead of html tags for styling
• Instead of styling in JS. Add a CSS class in JS instead
• Look how packed with logic Your for loop is. It's a bit hard to understand + avoid complicated logic inside of loops. Performance is important
• It's not a good practice to separate the dom elements using <br>

• abjim: Thanks adam for your suggestion. My code works fine. I was stucked with my logic, that's why its bit difficult to see. I am working more on my coding to make it better.
• AdamKniec: @abjim keep it up ! :)
• AdamKniec: @abjim consider marking my response if it was helpful and You have no further questions : )
• abjim: I'm bit confused with my JS part. in the domcontentloaded portion. Still waiting for further improvement.