Блог

Главная - Вопросы по программированию - Липкий заголовок таблицы в обычном JS

Липкий заголовок таблицы в обычном JS

#javascript #html-table

#javascript #html-таблица

Вопрос:

Я написал код для липкого / фиксированного заголовка таблицы. Я немного смущен своим кодированием, хотя оно выполняет мою работу. Я знаю, что существует много доступных кодов jQuery. Но я хотел сделать это в обычном JS с поддержкой IE. Теперь я хочу посмотреть, есть ли что-то неправильное / злоупотребление языком в моем коде. Если есть какой-либо эффективный код, который я могу реализовать здесь, пожалуйста, дайте мне знать.

Вот мой код:

 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 amp;amp; offset <= tableOffsetBottom)
      clonedTable[n].style.display = 'table';
  }
}); 
 body {
  font: .9em 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>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>
<br>
<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>

Комментарии:

1. Есть ли у вас какие-либо известные проблемы? Или вы просто просите людей просмотреть ваш код? (Если это так, это лучше подходит для сайта code review )

2. @DBS Я покончил с этим кодом. У меня нет проблем. Я хочу получить отзыв. Если что-то можно обновить здесь для оптимизации этого процесса.

Метки: