使用jquery设置大号数字

Question

我有一张包含数字等的大表。我试图根据小数，数百，数千和数百万来为大数字着色。

EG。

<tr>
   <td class="numColour">20,000,365.00 ISK</td>
   <td class="numColour">2,467,218,928.46 ISK</td>
   <td class="numColour">498,356.65 ISK</td>
</tr>

有一个加载更多的数字，但它们都在TD class = numColour中。 我之后的事情是这样的：

<tr>
   <td class="numColour"><span class="red">20</span>,<span class="blue">000</span>,<span class="green">365</span>.<span class="white">00</span> ISK</td>
   <td class="numColour"><span class="yellow">2</span>,<span class="red">467</span>,<span class="blue">218</span>,<span class="green">928</span>.<span class=white">46</span> ISK</td>
   <td class="numColour"><span class="blue">498</span>,<span class="green">356</span>.<span class="white">65</span> ISK</td>
</tr>

这可能是一种可怕的方式，但我开始将所有跨度放在这个：

$('.numColour').each(function(){
    var tempVal = $(this).html();
    tempVal = tempVal.replace(' ISK', '</span> ISK').replace('.', '</span>.<span>').replace(/,/g, '</span>,<span>');
    tempVal = "<span>" + tempVal;
    $(this).html(tempVal);
});

然后我想我可以添加课程。但我无法解决如何从小数点开始并向后工作将相关类应用于相关值。 IE。

分数=白色 数百=绿色 成千上万=蓝色 数百万=红色 数亿=黄色

难住了。非常感谢任何帮助。 感谢。

Answer 1

这对我有用：

var colors = ['hund', 'thou', 'mill', 'hmill'];
$('td.numColour').html(function () {
    var input = $(this).text();
    var num = input.split(' ');
    var dec = '<span class="frac">' + num[0].split('.')[1] + "</span>";
    var front = num[0].split('.')[0].split(',');
    for (var i = front.length - 1, j = 0; i >= 0; i--, j++) {
        front[i] = '<span class="' + colors[j] + '">' + front[i] + '</span>'
    }
    full = front.join(',') + '.' + dec + ' ' + num[1];
    return (full)
})

<强> jsFiddle example

Answer 2

这不是一个真正优化的解决方案，但这里有一些功能可以帮助您入门。的 DEMO

<强> HTML

<table id="numbers">
  <tr>
    <td class="numColour">20,000,365.00 ISK</td>
  </tr>
  <tr>
    <td class="numColour">2,467,218,928.46 ISK</td>
  </tr>
  <tr>
    <td class="numColour">498,356.65 ISK</td>
  </tr>
</table>

<强> CSS

body {
  background: #666;
  color: #999;
}

.numColour {
  font-family: monospace;
}

.fraction {
  color: #fff;
}

.int-group-1 {
  color: #00c800;
}

.int-group-2 {
  color: #0000c8;
}

.int-group-3 {
  color: #c80000;
}

.int-group-4 {
  color: #c8c800;
}

.int-group-5 {
  color: #00c8c8;
}

<强>的JavaScript

var SEPARATOR_DECIMAL_US_EN = '.';
var SEPARATOR_GROUP_US_EN = ',';

var normalizeNumberFromString = function(s, decimalSeparator) {
  var intParts;
  decimalSeparator = decimalSeparator || SEPARATOR_DECIMAL_US_EN;
  var normalized = s.trim().replace(/[^0-9.]/g, "");
  var parts = normalized.split(decimalSeparator);
  return {
    intPart: parts[0],
    fractionPart: parts[1]
  }
}

var separateIntIntoReversedGroups = function(i) {
  var parts = [];
  var part;
  i = parseInt(i, 10);

  while (i > 0) {
    part = i % 1000;
    parts.push(part);
    i = parseInt(i / 1000, 10);
  }
  return parts;
}

var padNum = function(n, pad, len) {
  var i = 0;
  var padLength;
  var s = '';

  n = '' + n;

  pad = '' + pad;
  pad = pad.charAt(0) || ' ';

  if (n.length >= len) {
    return '' + n;
  }

  padLength = len - n.length;
  for (i; i < padLength; ++i) {
    s = s + pad;
  }
  s = s + n;
  return s;
}

var formatStringFromSeparatedNumber = function(reversedIntGroups, fractionPart, groupSeparator, decimalSeparator) {
  var g, i, intGroups = [], numGroups = reversedIntGroups.length, s = '';

  groupSeparator = groupSeparator || SEPARATOR_GROUP_US_EN;
  decimalSeparator = decimalSeparator || SEPARATOR_DECIMAL_US_EN;

  for (i = reversedIntGroups.length - 1; i >= 0; i--) {
    g = '<span class="int-group-' + (i+1) + '">';
    if (i < reversedIntGroups.length - 1) {
      g += padNum(reversedIntGroups[i], 0, 3);
    } else {
      g += reversedIntGroups[i];
    }
    g += '</span>';
    intGroups.push(g);
  }
  s = intGroups.join(groupSeparator);
  s = s + decimalSeparator + '<span class="fraction">' + fractionPart + '</span>';
  return s;
};

var formatNumberString = function(s) {
  var parts, reversedIntGroups;
  parts = normalizeNumberFromString(s);
  reversedIntGroups = separateIntIntoReversedGroups(parts.intPart);
  return formatStringFromSeparatedNumber(reversedIntGroups, parts.fractionPart, ',', '.');
};

var replaceWithFormattedNumber = function(i, el) {
  var $el = $(el);
  var v = $el.html();
  v = formatNumberString(v);
  console.log('v::', v);
  $el.html(v);
};

$(document).ready(function() {
  $('.numColour').each(replaceWithFormattedNumber);
});