HTML и JavaScript — условное форматирование не работает

Я пытаюсь создать условное форматирование с помощью JavaScript и HTML.

В основном у меня есть таблица со следующими полями:

table
system
timestamp
total_amount
amount_used
amount_free

Что я хочу, чтобы на основе значения столбца amount_free изменить цвет поля.

В этом случае, если мой столбец amount_free равен 0 €, я хочу, чтобы в моей ячейке был красный цвет.

Для этого я использую следующий код:

$(document).ready(function() {
  $('#table_id td.amount_free').each(function() {
    if ($(this).text() == '0 €') {
      $(this).css('background-color', '#f00');
    }
  });
});

table,
td {
  word-wrap: keep-all;
  border: 1px solid black;
  border-collapse: collapse;
}

table,
th {
  border: 1px solid black;
}

th,
td {
  padding: 3px;
}

,
th {
  text-align: left;
}

,
th {
  background-color: #f2f2f2;
}

,
td {
  font-family: arial;
  font-size: 10pt;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style=width:100%>
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <td>0 €</td>
  </tr>
</table>

Но он не возвращает никакого цвета. Только таблица без форматирования. Может кто-нибудь помочь мне?

Пожалуйста, предоставьте отформатированный код

— 18.07.2019 12:46

Селектор '#table_id td.amount_free' не относится ни к одному элементу, поэтому ваш скрипт jquery в основном ничего не делает.

— 18.07.2019 12:53

На <td> также нет классов, поэтому у td.amount_free нет совпадений

— 18.07.2019 12:53

javascript jquery html conditional-formatting

18.07.2019 12:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

307

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

вы проверяете таблицу с идентификатором table_id, которого не существует. Далее вы проверяете td-элемент с классом amount_free, которого также не существует.

Если вы добавите идентификатор и класс, это сработает.

$(document).ready(function() {
  $('#table_id td.amount_free').each(function() {
    if ($(this).text() == '0 €') {
      $(this).css('background-color', '#f00');
    }
  });
});

table,
td {
  word-wrap: keep-all;
  border: 1px solid black;
  border-collapse: collapse;
}

table,
th {
  border: 1px solid black;
}

th,
td {
  padding: 3px;
}

,
th {
  text-align: left;
}

,
th {
  background-color: #f2f2f2;
}

,
td {
  font-family: arial;
  font-size: 10pt;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style = "width:100%" id = "table_id">
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <td class = "amount_free">0 €</td>
  </tr>
</table>

18.07.2019 12:55

у вас есть опечатка в вашем коде (часть стиля), в вашей таблице также отсутствует свойство ID, и в нем нет TD с классом amount_free.

Попробуйте с:

<head>
<script type='text/javascript'>
    $(document).ready(function(){
        $('#table_id td.amount_free').each(function(){
            if ($(this).text() == '0 €') {
                $(this).css('background-color','#f00');
            }
        });
     });
</script>
</head>
<br><br>
<style>
table, td {
    word-wrap: keep-all;
    border: 1px solid black;
    border-collapse: collapse;
}
table, th { 
    border: 1px solid black;
}
th, td {
    padding: 3px;
}
th {
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
td{
    font-family: arial;
    font-size: 10pt;
}
</style>
    <table style=width:100% id = "table_id">
        <tr>
            <th>table</th>
            <th>system</th>
            <th>timestamp</th>
            <th>total_amount</th>
            <th>amount_used</th>
            <th>amount_free</th>
        </tr>
        <tr>
            <td>amount_values</td>
            <td>users</td>
            <td>2019-07-18 00:00:00</td>
            <td>398 €</td>
            <td>179 €</td>
            <td class = "amount_free">0 €</td>
        </tr>
  </table>

18.07.2019 12:56

Вам нужно указать id для тега table и имя class для вашего конкретного тега td в вашем примере. Таким образом, ваш html-код будет выглядеть следующим образом:

 <!–– add id to table ––> 
<table id = "table_id" style=width:100%>
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <!–– add class to td ––> 
    <td class = "amount_free">0 €</td>
  </tr>
</table>

18.07.2019 12:57

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

$(document).ready(function() {
  $('#table_id .amount_free_value').each(function() {
    const value = $(this).text().split('€')[0];
    if (value == 0) {
      $(this).css('background-color', '#f00');
    }
  });
});

table,
td {
  word-wrap: keep-all;
  border: 1px solid black;
  border-collapse: collapse;
}

table,
th {
  border: 1px solid black;
}

th,
td {
  padding: 3px;
}

,
th {
  text-align: left;
}

,
th {
  background-color: #f2f2f2;
}

,
td {
  font-family: arial;
  font-size: 10pt;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style = "width:100%" id = "table_id">
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <td class = "amount_free_value">0 €</td>
  </tr>
</table>

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

Вы можете сделать это таким образом.

18.07.2019 12:57