Not sorted columns, what is the reason?

<!DOCTYPE HTML>
<html>

the <head>
 <meta charset="utf-8">
<style>
 th {
 cursor: pointer;
}

 th:hover {
 background: yellow;
}
</style>
</head>

the <body>

 <table id="grid">
 <thead id='header'>
the <tr>
 <th data-type="number">Age</th>
 <th data-type="string">Name</th>
</tr>
</thead>
<tbody>
the <tr>
<td>5</td>
<td>VA</td>
</tr>
the <tr>
<td>2</td>
<td>Peter</td>
</tr>
the <tr>
<td>12</td>
<td>Jack</td>
</tr>
the <tr>
<td>9</td>
<td>Mary</td>
</tr>
the <tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>

the <script>
 function sortColumn(colNum, type){
 let body = document.getElementByTagName('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>
March 20th 20 at 11:35
0 answer

Find more questions by tags CSSHTML