Изменение цвета строки в таблице по выбранному статусу

Question

Всем привет Есть таблица, в которой вывожу данные о работе сотрудников тех. отдела

у меня есть отдельная таблица в бд со статусами, кол-во статусов 9, сначала добавляю инцидент в таблицу, потом когда надо меняю статус инцидента, и вот хочу чтоб при выборе определенного статуса менять цвет строчки, подскажите пожалуйста как реализовать скрипт, в форуме есть похожие темы, но тут во многих случаях по клику меняют цвет и т.д.

<table>
           <thead>
                    <tr>
                        <th>ID</th>
                        <th>Инцидент добавлен</th>
                        <th>Агент</th>
                        <th>Количество заявок</th>
                        <th>Номера терминалов</th>
                        <th>Примечание</th>
                        <th>Статус</th>
                        <th>Регион</th>
                        <th>Дата изменения инцидента</th>
                        <th>Специалист</th>
                        <th>Редактирование</th>
                    </tr>
            </thead>
            <tbody>
                    <?php foreach($tasks as $task):?> //вывожу циклом данные из бд
 
                    <tr>
                        <td><?= $task["id"]; ?></td>
                        <td><?= $task["date"]; ?></td>
                        <td><?= $task["title"]; ?></td>
                        <td><?= $task["content"]; ?></td>
                        <td><?= $task["amount"]; ?></td>
                        <td><?= $task["comment"]; ?></td>
                        <td><?= $task["status"]; ?></td>
                        <td><?= $task["region"]; ?></td>
                        <td><?= $task["change_time"]; ?></td>
                        <td><?= $task["spe******t"]; ?></td>
 
                        <td class="btn-all">
                            <a href="show.php?id=<?= $task['id'];?>" class="btn-show">Show</a>
                            <a href="edit.php?id=<?= $task['id'];?>" class="btn-edit">Edit</a>
                            <a onclick="return confirm('Вы уверены, что хотите удалить инцидент?');" href="delete.php?id=<?= $task['id'];?>" class="btn-delete">Delete</a>
                        </td>
                    </tr>
 
                    <?php endforeach; ?>
        </tbody>
</table>

Answer 1

Вот так это можно сделать. https://codepen.io/latdev/pen/xxXZrbQ

document.getElementById("statusSelect").addEventListener('change', function(event) {
  let status_id = event.target.value;
  [...document.querySelectorAll(".status-all")].forEach(e => e.style.backgroundColor = '');
  if (status_id !== "none") {
    [...document.querySelectorAll(".status-"+status_id)].forEach(e => e.style.backgroundColor = 'pink');
  }
});

В каждый tr добавляешь классы class="status-all status-<?= $status_id ?>" потом в JS чистишь все status-all и заполняешь цветом status-XXX

БЛОГ НА HUSL

Изменение цвета строки в таблице по выбранному статусу

Ответы (1 шт):