2

読みやすくするために、表の数字に色を付けたいと思います。 

  • 正の場合は緑（+00.00）;
  • 負の場合は赤（-00.00）および;
  • デフォルトの場合は黒（符号なし）
4

6 に答える 6

7

ここに行く：

$(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;
}
于 2009-12-01T06:10:00.027 に答える
5

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>

于 2017-10-03T06:08:10.303 に答える
3

まず、数値が静的である場合にこれを行うための最良の方法は、サーバー側です。値に基づいてクラスを割り当てます。

<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や3,456など）。

なぜ正規表現だけでなくparseFloat()？なぜなら：

parseFloat("34 widgets");

34を返します。これで問題がない場合は、それを使用して正規表現テストをスキップします。

于 2009-12-01T06:07:45.880 に答える
2

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')
  }
})
于 2009-12-01T06:16:27.097 に答える
1

より完全な解決策は次のとおりです。

<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でこのコードを提供してくれたAlunRoweに感謝します

于 2015-01-08T11:10:28.713 に答える
0

tdにcurrency-fieldクラスを設定し、そのtdでchangeイベントをリッスンします。次に、値に応じて、適切なcssクラスを追加して色を変更する必要があります。

于 2015-01-24T17:46:53.487 に答える