Блог

У меня есть таблица, в которой есть столбцы данных, содержащие статус. Два примера статусов будут «Отклонены» и «Оплачены»

То, что я хочу сделать, это изменить цвет текста «Отклонено» на красный, а цвет «Оплачено» на зеленый.

Для ячеек с таким статусом я добавил td classs к подобному:

 <td class="status">
    @Html.DisplayFor(modelItem => item.Status)
</td>
  

Поэтому я могу легко его идентифицировать.

Я обнаружил, что могу изменить цвет всех статусов на красный, используя:

 $('.status').css("color", "red");
  

Также я мог бы получить значение первого с помощью:

 alert($('.status').html());
  

Однако я не уверен, как установить цвет статуса на основе его текста. т.е. для всех «Полученных» установите цвет на красный, а для всех «оплаченных» установите цвет на зеленый.

Может кто-нибудь просветить меня о том, как этого добиться?

Я даже следую правильному подходу, используя jQuery, или есть лучший способ css?

Это будет работать:

 $('.status:contains("Paid")').css('color', 'red');
$('.status:contains("Received")').css('color', 'green');
  

http://jsfiddle.net/MMEhc/

Также я мог бы получить значение первого по…

С помощью этого селектора вы получаете коллекцию. И вы делаете .html() это с первым элементом в коллекции.

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

 $('.status').each(function() {
  // check text and do styling
});
  

Однако это не является предпочтительным (потому что это не нужно). И это снижает производительность.

Вы также можете использовать jQuery .contains() для этого ( http://api.jquery.com/contains-selector / ).

Также на самом деле не требуется. И я думаю, что это не лучший вариант с точки зрения производительности.

Итак, лучший вариант (ИМХО):

Почему бы вам просто не добавить два дополнительных класса к ячейкам: status-received и status-paid поскольку вы уже знаете статус ячеек при их рендеринге.

Итак, вы просто могли бы сделать:

 $('.status-received').css("color", "red");
$('.status-paid').css("color", "red");
  

Или полностью удалите jQuery (поскольку он нам больше не нужен (если мы не собираемся динамически изменять ячейки)) и просто оформите два класса с помощью CSS.

Если вы печатаете таблицу из базы данных, просто назначьте класс на td основе результата.

Затем назначьте цвет фона этому классу.

 td.paid {
 display:block;
background-color:red;

}

td.recieved {
 display:block;
background-color:green;
}
  

Почему вам нужно использовать javascript для этого в первую очередь?

Если я не ошибаюсь, приведенный выше код является jQuery, поэтому не забудьте добавить библиотеку, если вы ее используете.

Недавно мне пришлось сделать что-то подобное. Мне нужно было изменить цвет фона на красный (ну, розоватый), когда произошла ошибка, и оставить его белым, когда все было хорошо. Вот мой код:

 warning_color = "#ffffff";

if (error_happened)
    warning_color = "#ffaaaa";

$("#input_box").css('background-color', warning_color);
  

 $('td.status').each(function() {
  if ($(this).text() == 'Received') {
      $(this).style('color', 'red');
  } // similarly for other statuses
});
  

 $('.status').addClass($(".status").html());
  

Тогда вы могли бы иметь .Paid класс и .Received класс и установить css в этих классах соответственно. Таким образом, если вы когда-нибудь захотите изменить css позже, он абстрагируется от javascript. Также вы можете использовать эти классы и в других местах, если это необходимо.