English 中文(简体)
Colorize negative/positive numbers (jQuery)
原标题:

I d like to color numbers in a table for better readability: 

  • green for positive (+00.00);
  • red for negative (-00.00) and;
  • black for default case (no sign)
最佳回答

Here ya go:

$(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 );
}

Then use CSS to style the input elements:

td.red {
  color: red;
}

td.green {
  color: green;
}
问题回答

CSS only, without javascript solution. I found it here 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>

Firstly, the best way to do this if the numbers are static is on the serverside. Assign a class based on value:

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

with:

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

(or be more selective if you need to be).

But if you must do this on the client, I might suggest:

$("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");
    }

  }
});

You may need to adjust the regular expression depending on what kinds of numbers you want to catch (eg 1.2e11 or 3,456).

Why the regex and not just parseFloat()? Because:

parseFloat("34 widgets");

returns 34. If this is fine then use that and skip the regex test.

The css:

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

The markup

<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>

The code

$( td ).each(function() {
  var val = $(this).text(), n = +val;
  if (!isNaN(n) && /^s*[+-]/.test(val)) {
    $(this).addClass(val >= 0 ?  pos  :  neg )
  }
})

Here is the more complete solution:

<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>

Thanks Alun Rowe for providing this code at http://www.alunr.com/articles/jquery-addclass-to-positive-and-negative-values-on-a-page

Set up the currency-field class on the td and listening for change event on that td then depending on the value it should add the proper css class to change the color.





相关问题
getGridParam is not a function

The HTML: <a href="javascript:void(0)" id="m1">Get Selected id s</a> The Function: jQuery("#m1").click( function() { var s; s = jQuery("#list4").getGridParam( selarrrow )...

selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

jQuery cycle page with links

I am using the cycle plugin with pager functionality like this : $j( #homebox ) .cycle({ fx: fade , speed: fast , timeout: 9000, pager: #home-thumbs , ...

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

jConfirm with this existing code

I need help to use jConfirm with this existing code (php & Jquery & jAlert). function logout() { if (confirm("Do you really want to logout?")) window.location.href = "logout.php"; } ...

Wrap text after particular symbol with jQuery

What I m trying to do, is wrap text into div inside ll tag. It wouldn t be a problem, but I need to wrap text that appears particularly after "-" (minus) including "minus" itself. This is my html: &...

热门标签