из массива(js) в таблицу(html)

by Aleksandr Tomashov

HTML

<table class="js-teachers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>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

//===================================================//
//=========  из массива(js) в таблицу(html)  ========//
//===================================================//


let teachers = [
	{
    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',
  }
]

function highlight(table) {
  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;
}

highlight(document.querySelector('.js-teachers'))