Как изменить цвет ячейки таблицы в html

У меня есть таблица предметов. Как сделать так, чтобы ячейка менял цвет, скажем, на красный, если элемент равен 0

Идентификатор таблицы — myTable. Я не знаю, как мне это сделать в javascript. Я добавил идентификатор:

<td id = "quantity"><?php echo e(($row['Quantity'])); ?></td>
  function ChangeColor(){
  .... //what goes here
}

Вы работаете с laravel?

Adhitya 16.12.2020 07:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
358
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Вы хотели бы сделать это в PHP во время выполнения, а не в JavaScript, как вы намекаете:

Например,

 <?php 
   $backgroundColor = $row['Quantity'] == 0 ? 'red' : 'none';
   echo '<td id = "quantity" style = "background-color: ' . $backgroundColor .'">' . e(($row['Quantity'])) . '</td>';
?>

Используйте class вместо id

<td class = "quantity"><?php echo e(($row['Quantity'])); ?></td>

затем выберите <td> с классом «количество» и оцените их содержание

document.querySelectorAll('td.quantity').forEach(e => {
  if ( Number(e.textContent) < 0)
    e.classList.add('negativeQtty')
})

затем объявите класс css negativeQtty

.negativeQtty {
  background-color: red;
}

Не могли бы вы объяснить, почему trim()?

cape_bsas 16.12.2020 07:16

действительно, .trim() может не понадобиться при использовании Number().

Roko C. Buljan 16.12.2020 07:23

Вы можете использовать фоновый класс Bootstrap

<td id = "quantity"class = "p-3 mb-2 bg-primary text-white"><?php echo e(($row['Quantity'])); ?></td>

Это код javascript, если вы хотите использовать javascript.
Нужен звонок с cell из th, тогда дайте cell.innerHTML.

Этот пример

var th = document.querySelectorAll('th')
for (let cell of th) {
  if (cell.innerHTML === '6'){
    cell.style.backgroundColor = 'green'
  }
  if (cell.innerHTML === '0'){
    cell.style.backgroundColor = 'red'
  }
}
table {
  margin-bottom: 1em;
  border-collapse: collapse;
}

td,
th {
  padding: .25em .5em;
  border: 1px solid #333;
  font: .75em "Verdana";
}
<table id = "Table">
  <tbody>
    <tr>
      <th>Data</th>
      <th>Number</th>
      <th>Total</th>
    </tr>
    <tr>
      <th>Product</th>
      <th>0</th>
      <th>6</th>
    </tr>
    <tr>
      <th>Product2</th>
      <th>5</th>
      <th>0</th>
    </tr>
  </tbody>
</table>

Другие вопросы по теме