Раскрасить отрицательные / положительные числа (jQuery) - PullRequest
Новая
       32

Раскрасить отрицательные / положительные числа (jQuery)

2 голосов
/ 01 декабря 2009

Я хотел бы раскрасить числа в таблице для лучшей читаемости:

  • зеленый для положительного (+00.00);
  • красный для отрицательного (-00.00) и;
  • черный для случая по умолчанию (без знака)

Ответы [ 6 ]

5 голосов
/ 01 декабря 2009

Вот, пожалуйста, 

$(document).ready( function() {

  // the following will select all 'td' elements with class "of_number_to_be_evaluated"
  // if the TD element has a '-', it will assign a 'red' class, and do the same for green.

  $("td.of_number_to_be_evaluated:contains('-')").addClass('red');
  $("td.of_number_to_be_evaluated:contains('+')").addClass('green');
}

Затем используйте CSS для стилизации элементов ввода: 

td.red {
  color: red;
}

td.green {
  color: green;
}
3 голосов
/ 01 декабря 2009

Во-первых, лучший способ сделать это, если числа статичны, находится на стороне сервера. Назначьте класс на основе значения: 

<td class="positive">+34</td>
<td class="negative">-33</td>

с: 

td { color: black; }
td.positive { color: green; }
td.negative { color: red; }

(или быть более избирательным, если вам нужно).

Но если вы должны сделать это на клиенте, я мог бы предложить: 

$("td").each(function() {
  var text = $(this).text();
  if (/[+-]?\d+(\.\d+)?/.test(text)) {
    var num = parseFloat(text);
    if (num < 0) {
      $(this).addClass("negative");
    } else if (num > 0) {
      $(this).addClass("positive");
    }

  }
});

Возможно, вам придется настроить регулярное выражение в зависимости от того, какие числа вы хотите поймать (например, 1.2e11 или 3456).

Почему регулярное выражение, а не просто parseFloat()? Потому что: 

parseFloat("34 widgets");

возвращает 34. Если это нормально, используйте это и пропустите тест регулярного выражения.

2 голосов
/ 03 октября 2017

только CSS, без решения javascript. Я нашел это здесь http://rpbouman.blogspot.ru/2015/04/css-tricks-for-conditional-formatting.html

    /* right-align monetary amounts */
    td[data-monetary-amount] {
      text-align: right;
    }

    /* make the cells output their value */
    td[data-monetary-amount]:after {
      content: attr(data-monetary-amount);
    }

    /* make debit amounts show up in red */
    td[data-monetary-amount^="-"]:after {
      color: red;
    }
  <table border="1">

   <tr>
    <th>Gain</th>
    <td data-monetary-amount="$100"></td>
   </tr>

   <tr>
    <th>Losst</th>
    <td data-monetary-amount="-$100"></td>
   </tr>

  </table>
2 голосов
/ 01 декабря 2009

Css: 

.pos { color:green; }
.neg { color:red; }

Наценка 

<table>
  <tr><td>+11.11</td><td>-24.88</td><td>00.00</td></tr>
  <tr><td>-11.11</td><td>4.88</td><td>+16.00</td></tr>
</table>

Код 

$('td').each(function() {
  var val = $(this).text(), n = +val;
  if (!isNaN(n) && /^\s*[+-]/.test(val)) {
    $(this).addClass(val >= 0 ? 'pos' : 'neg')
  }
})
1 голос
/ 08 января 2015

Вот более полное решение: 

<script>
$(document).ready( function() {
// get all the table cells where the class is set to "currency" 
$('td.currency').each(function() {
//loop through the values and assign it to a variable 
    var currency = $(this).html();
//strip the non numeric, negative symbol and decimal point characters
// e.g. Spaces and currency symbols 
    var val = Number(currency.replace(/[^0-9\.-]+/g,""));
// check the value and assign class as necessary 
// (I'm sure this could be done with a switch statement 
    if(val > 0) {
        $(this).addClass('positive');
    }
    if(val < 0) {
        $(this).addClass('negative');
    }
    })
})
</script>

Спасибо Алану Роу за предоставленный код http://www.alunr.com/articles/jquery-addclass-to-positive-and-negative-values-on-a-page

0 голосов
/ 24 января 2015

Установите класс валютного поля на td и прослушивайте событие изменения на этом td, затем в зависимости от значения следует добавить соответствующий класс css для изменения цвета.

...