如何引用div标签的Javascript函数来添加逗号？

Question

I am a Javascript newbie ... and I've heard of jQuery, but don't have a clue how to use it, so please bear with my complete lack of knowledge here ... :)

I am dynamically importing information from an Excel database onto a website. It works great, except that none of the numbers have commas - it's a formatting issue that I can't change at the source, so I need to change it in the website code.

The relevant HTML code looks like this:

<tr><td class="num">191025</td><td>Stuff</td><td class="num">$60</td></tr>
<tr><td class="num">184160</td><td>Other Stuff</td><td class="num">$15</td></tr>

I want to use Javascript (or jQuery - whatever works) to add commas to all existing "num" classes (so 191025 would appear as 191,025).

I have been poking around this site and others and found this site: http://www.mredkj.com/javascript/nfbasic.html which has this public domain code:

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Which seems great, and I added it to my existing external .js page that I reference within my html page.

However, the issue is now how do I use the code? Looking at the examples on that page, it looks like I would have to do something like this:

<tr><td class="num">addCommas(191025)</td><td>Stuff</td><td class="num">$60</td></tr>

And that's just not realistic - there are hundreds of these numbers, and I just can't update each and every one of them individually.

I am certain that there's a way that Javascript (or jQuery?) can automatically apply coding to the existing "num" classes to insert commas ... but I have no idea how to go about it. So, all of this bring me to my question: How do I efficiently apply this (or other - better?) code to the div class so that commas are added?

I greatly appreciate any help ... but please keep in mind my newbie-ness, and let me know what needs to go in the external .js sheet & what goes on the .html page.

Thank you!!

Answer 1

jQuery solution:

$('.num').each(function () {
    $(this).text(addCommas($(this).text()));
});​​​​​​​​​​

javascript solution (won't work in IE as it does not support getElementsByClassName )

var elements = document.getElementsByClassName('num');
var textPropertyToUse; // cross-browser support

for (var i = 0; i < elements.length; i++) {
    textPropertyToUse = 'textContent' in elements[i] ? 
        'textContent' : 
        'innerText';

    elements[i][textPropertyToUse] = addCommas(elements[i][textPropertyToUse]);
}

Working example: http://jsfiddle.net/XpbJV/

Answer 2

Execute this code on page load:

$(".num").each(function() {
   var self = $(this), text = self.text();
   self.text(addCommas(text));
});

Answer 3

A very simple jQuery solution would be...

$(".num").text(addCommas);

...as long as you change your addCommas function signature to this...

function addCommas(i, nStr)

---

This will work because your addCommas would take the current text content as the second argument, and return the updated text content. That's how most of jQuery's iterator versions of their methods work.

DEMO: http://jsfiddle.net/gprf6/