Как включить javascript в HTML, чтобы таблица меняла цвет в зависимости от значения?

ProgramBox

Как включить javascript в HTML, чтобы таблица меняла цвет в зависимости от значения?

Post author:admin
Запись опубликована:15 марта, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Как мне создать javascript, который изменит цвет поля в зависимости от его значения?

 <table>
<tr class="top row">
    <th> Status </th>
    <th> Name</th>
    <th> StudentID </th>
    <th> Grades </th>
</tr>
<tr>
    <td> BAD </td>
    <td> Jason </td>
    <td> 955012 </td>
    <td> 20 </td>
</tr>
</table>

например; если поле значение (td) = OK будет зеленым, если значение НЕВЕРНО, поле будет желтым.

Текущий Java-скрипт, основанный на аналогичном вопросе

  $('#test [id^="available_"]').each(function(){

var closestTd = $(this).closest('td');
var valueCache = parseInt($(this).val());

if(valueCache === CRITICAL) {
   closestTd .addClass('red');
}
else if(valueCache === BAD) {
   closestTd.addClass('yellow');
}
else {
   closestTd.addClass('green');
}

});

1. Покажите нам, что вы пробовали, чтобы мы могли указать вам правильное направление!

2. Вы знакомы с jQuery? Это была бы идеальная ситуация для его использования.

3. Как вы генерируете код таблицы HTML? Если вы используете PHP, вы можете изменить цвет.

4. @kamigoosby Я никогда не использовал Jquery, я бы не смог этого сделать.

5. @jc__ Это простой html-файл, связанный с css и js-файлом.

Ответ №1:

На самом деле, вы можете сделать это с помощью чистого CSS.

Обратите внимание на data-status атрибут со значением

 <table>
<tr class="top row">
    <th> Status </th>
    <th> Name</th>
    <th> StudentID </th>
    <th> Grades </th>
</tr>
<tr>
    <td data-status="BAD"> BAD </td>
    <td> Jason </td>
    <td> 955012 </td>
    <td> 20 </td>
</tr>
</table>

И CSS для стилизации

 tr td[data-status="OK"] {
  background-color: green;
}
tr td[data-status="BAD"] {
  background-color: yellow;
}

Пример
http://codepen.io/KarlDoyle/pen/jraJEB

1. Измените <td alt="BAD"> на <td data-status="BAD"> , и вы получите от меня одобрение

2. @LGSon — У меня действительно было это изначально 🙂

3. Что теперь, если значение «BAD» превратится в «OK». Это в основном изменение цвета ячейки в зависимости от значения? @KarlDoyle

4. @Jesse, если значение «BAD» превращается в «OK», фон ячейки становится «желтым»

5. @Jesse — Согласен, как упоминал denysM. Идея заключается в том, что если вы генерируете значения, то вы также можете генерировать значение атрибута

Ответ №2:

Дайте некоторое имя класса каждому td, к которому вы хотите применить проверку на основе значений, т.Е. Используйте приведенный ниже код

 <html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        if($(".chkval").text()=="OK"){
      $(".chkval").css("background-color","green");
}
else if($(".chkval").text()=="BAD"){
      $(".chkval").css("background-color","yellow");
}
});


    </script>
</head>
<body>
   <table>
<tr class="top row">
    <th> Status </th>
    <th> Name</th>
    <th> StudentID </th>
    <th> Grades </th>
</tr>
<tr>
    <td class="chkval"> BAD </td>
    <td> Jason </td>
    <td> 955012 </td>
    <td> 20 </td>
</tr>
</table>
</body>
</html>

Ответ №3:

Вам нужно использовать innerHTML для получения значения из td :

 <table>
<tr class="top row">
    <th> Status </th>
    <th> Name</th>
    <th> StudentID </th>
    <th> Grades </th>
</tr>
<tr>
    <td id="td"> OK </td>
    <td> Jason </td>
    <td> 955012 </td>
    <td> 20 </td>
</tr>
</table>
<script src="path/to/your/script.js"></script>

script.js:

    var td = document.getElementById('td');
   if(td.innerHTML == ' OK ')
      td.style.backgroundColor = 'green';
   else if(td.innerHTML == ' BAD ')
      td.style.backgroundColor = 'yellow';

РЕДАКТИРОВАТЬ: добавлена функция JS trim() :

     var td = document.getElementById('td');
    if(td.innerHTML.trim() == 'OK')
        td.style.backgroundColor = 'green';
    else if(td.innerHTML.trim() == 'BAD')
        td.style.backgroundColor = 'yellow';

1. Можно ли поместить этот скрипт во внешний js-файл?. Спасибо, должен ли я создавать более одного идентификатора для каждого поля? В настоящее время он окрашивает только 1 ячейку.

2. @Jesse Чтение текста — плохое решение. Что, если вы хотите сказать, почему это плохо .. или второй язык .. или в этом случае символы пробела обрезаются на одном или другом?

3. @DenysM — С этим подходом возникают различные проблемы, в первую очередь, если у вас есть несколько TD с одинаковым значением. и вам необходимо применить идентификатор к каждому, который довольно тяжелый

4. @Karl, я согласен с тобой. Я просто хочу показать пример, используя html-код Джесси. Как по мне, проще использовать jQuery. Но Джесси сказал, что он никогда не использовал jQuery. Также мы можем использовать функцию JS trim() и удалять пробелы с обеих сторон строки.

5. Если у вас есть несколько TD, и вы хотите проверить его значение в этот раз, вы можете использовать атрибут class, как я показал в своем коде

Ответ №4:

Другое решение с использованием JS.

Вот функция, которая применяет уникальный класс к каждому td, который имеет указанное вами значение.

 function addTdClass(string) {
  var element = document.getElementsByTagName('td');
  for (var i = 0; i < element.length; i  ) {
    var str = element[i].innerHTML;
    if (str.indexOf(string) !== -1) {
      element[i].className = 'td-'   string;
    }
  };  
}

addTdClass('BAD');

Живой пример
http://codepen.io/KarlDoyle/pen/kkxqbv

1. @Jesse — Нет проблем, если у вас есть некоторая гибкость в вашем коде, я бы предложил метод css, который я выделил ниже 🙂

2. Возможно, я неправильно реализовал ваш приведенный ниже код или что-то в этом роде, раньше у меня это не работало.