Не сортируются колонки, что может быть не так?

118
25 ноября 2020, 19:00

<!DOCTYPE HTML> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <style> 
    th { 
      cursor: pointer; 
    } 
 
    th:hover { 
      background: yellow; 
    } 
  </style> 
</head> 
 
<body> 
 
  <table id="grid"> 
    <thead id='header'> 
      <tr> 
        <th data-type="number">Возраст</th> 
        <th data-type="string">Имя</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>5</td> 
        <td>Вася</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Петя</td> 
      </tr> 
      <tr> 
        <td>12</td> 
        <td>Женя</td> 
      </tr> 
      <tr> 
        <td>9</td> 
        <td>Маша</td> 
      </tr> 
      <tr> 
        <td>1</td> 
        <td>Илья</td> 
      </tr> 
    </tbody> 
  </table> 
 
  <script> 
    function sortColumn(colNum, type){ 
      let body = document.getElementsByTagName('tbody')[0]; 
      document.removeChild(body); 
      let rows = [].slice.call(body.rows); 
       
      let sortFunction; 
       
      switch(type){ 
        case 'number': 
          sortFunction = function(A, B){ 
            return A.cells[colNum].innerHTML - B.cell[colNum].innerHTML; 
          }; 
           
        case 'string': 
          sortFunction = function(A, B){ 
            return A.cells[colNum].innerHTML > B.cell[colNum].innerHTML; 
          } 
      } 
       
      rows.sort(sortFunction); 
       
      for(let i = 0; i < rows.length; i++){ 
        body.appendChild(rows[i]); 
      } 
       
      document.querySelector('grid').appendChild(body); 
    } 
     
    let thead = document.querySelector('#header'); 
     
    thead.addEventListener('click', function(event){ 
      if (event.target.tagName != 'th') return; 
      let cellIndex = event.target.cellIndex; 
      let typeColumn = event.target.getAttribute('data-type'); 
       
      sortColumn(cellIndex, typeColumn); 
    }); 
     
  </script> 
 
</body> 
 
</html>

READ ALSO
В чем моя ошибка?
javascript

В чем моя ошибка?

Если элементы x расположены в порядке возрастания, возвращает true, иначе false

 88
Изменение атрибута src по клику
javascript

Изменение атрибута src по клику

 93
Как правильно подключить script?
javascript

Как правильно подключить script?

Хочу использовать на своем сайте данный код с code pen:

 126
Вставка данных на страницу с помощью ajax
javascript

Вставка данных на страницу с помощью ajax

На странице есть блок <div class="trading__buy-text" id="BS_title_balance"></div> В который текстом нужно динамически подгружать данные из БД Делаю следующим...

 118