onclick сортировка через <td data-...> в таблице

by Aleksandr Tomashov

HTML

<table class="js-teachers">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th data-field="age">Age</th>
      <th data-field="gender">Gender</th>
      <th data-field="status">Status</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

CSS

table,
td,
th {
  border: 1px solid gray;
}

.male td {
  background-color: #65bff3;
}

.female td {
  background-color: #932bb3;
}

.available td {
  border: 2px solid green;
}

.unavailable td {
  border: 2px solid red;
}

JavaScript

//====== onclick сортировка через <td data-...> в таблице  ======//

'use strict'

let users = [
  {
    name: 'Ilia',
    age: 30,
    gender: 'm',
    available: true,
    status: 'Free'
  },
  {
    name: 'Tim',
    age: 39,
    gender: 'm',
    available: true,
    status: 'On duty'
  },
  {
    name: 'Marina',
    age: 23,
    gender: 'f',
    available: false,
    status: 'Ready to teach',
  },
  {
    name: 'Sasha',
    age: 37,
    gender: 'm',
    status: 'Unknown'
  },
  {
    name: 'Ivan',
    age: 23,
    gender: 'm',
    available: true,
    status: 'Ready to teach',
  }
]
let table = document.querySelector('.js-teachers')

table.tHead.rows[0].onclick = function(event) {
// если атрибут "field" есть.
  let fieldName = event.target.dataset.field;
// если атрибута "field" нет.
  if (!fieldName) {
    return;
  }
// если атрибут "field" есть, то производим сортировку.
  let sortedUsers = users.sort((userA, userB) => {
    return userA[fieldName] > userB[fieldName];
  });

  fillTable(table, sortedUsers)
}

function fillTable(table, teachers) {
  let rowsHtml = '';

  for (let teacher of teachers) {
    let cssClasses = [];
    let hidden = false;
    let style = '';

    switch (teacher.available) {
      case true:
        cssClasses.push('available');
        break;
      case false:
        cssClasses.push('unavailable');
        break;
      default:
        hidden = true;
    }

    if (teacher.gender === 'm') {
      cssClasses.push('male')
    } else if (teacher.gender === 'f') {
      cssClasses.push('female')
    }

    if (teacher.age < 18) {
      style += 'style="text-decoration: line-through;"';
    }

    if (hidden) {
      style += 'hidden'
    }

    rowsHtml += `
    <tr class="${cssClasses.join(' ')}" ${ style }>
      <td>${ teacher.name }</td>
      <td>${ teacher.age }</td>
      <td>${ teacher.gender }</td>
      <td>${ teacher.status }</td>
    </tr>
  `;
  }

  table.tBodies[0].innerHTML = rowsHtml;

}
fillTable(table, users)