2
\$\begingroup\$

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>

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

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>
\$\endgroup\$
4
  • \$\begingroup\$ 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. \$\endgroup\$
    – abjim
    Commented Dec 3, 2020 at 7:36
  • \$\begingroup\$ @abjim keep it up ! :) \$\endgroup\$
    – AdamKniec
    Commented Dec 3, 2020 at 8:15
  • \$\begingroup\$ @abjim consider marking my response if it was helpful and You have no further questions : ) \$\endgroup\$
    – AdamKniec
    Commented Dec 8, 2020 at 8:53
  • \$\begingroup\$ I'm bit confused with my JS part. in the domcontentloaded portion. Still waiting for further improvement. \$\endgroup\$
    – abjim
    Commented Dec 10, 2020 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.