Как при генерации таблицы HTML сразу добавлять класс через JS?

Question

[Александр Ситник]

Вот генерируется табличка

<div class="table-wrap">
      <table id = 'test'>
        <tr>
          <th>Имя</th>
          <th>Фамилия</th>
          <th>Описание</th>
          <th>Цвет глаз</th>
        </tr>
        </tr>
      </table>
    </div>

document.querySelector('#test').innerHTML += arr.map(n => `
  <tr>
    <td>${n.name.firstName}</td>
    <td>${n.name.lastName}</td>
    <td>${n.about}</td>
    <td>${n.eyeColor} ${"<div id = 'eyeColor'; style = 'width: 20px; height: 20px; border-radius: 50%; background-color: red; margin: 0 auto;'>"}</td>
  </tr>
`).join('');

Можно как-то сделать так, чтобы генерировалась сразу с нужными классами?

Answer 1

[h88p]

document.querySelector('#test').innerHTML += arr.map(n => `
  <tr>
    <td class="${n.name.firstName}">${n.name.firstName}</td>
    <td class="${n.name.lastName}">${n.name.lastName}</td>
    <td class="${n.about}">${n.about}</td>
    <td class="${n.eyeColor}">${n.eyeColor} ${"<div id = 'eyeColor'; style = 'width: 20px; height: 20px; border-radius: 50%; background-color: red; margin: 0 auto;'>"}</td>
  </tr>
`).join('');

Comments

[Александр Ситник]

А еще такой вопрос, можно ли в background-color сразу отправить данные из сгенерированного столбца? Чтобы цвет дива соответствовал тексту?

[h88p]

Александр Ситник,

<td class="${n.eyeColor}">${n.eyeColor} <div id = 'eyeColor'; style = 'width: 20px; height: 20px; border-radius: 50%; background-color: ${n.eyeColor}; margin: 0 auto;'></td>

[Александр Ситник]

h88p, спасибо!