Apply javascript function to an html element

Question

Sorry for the noob question but I am trying to apply this javascript function to data in an html table. The function comes from this Stack Overflow post.

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

I wish to apply this function to something like this:

<table>
    <tr>
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

with the hopes of returning 5,000 next to 5,600. I can't figure out this simple thing. I know I need to use an id or class on one of the tags and that this needs to match something in the function so I tried

<table>
    <tr class="numberWithCommas">
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

to no avail. I'm sure the function works given the amount of upvotes.

Can a kind soul please walk me through the steps to make this work? I've googled all over for a basic tutorial and haven't found anything.

3dgoo · Accepted Answer · 2012-11-29T00:48:50.503

You first need to get all the tds, call the function on the content and insert the result back into the cell.

HTML

<table>
    <tr class="numberWithCommas">
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

Javascript

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var elements = document.querySelectorAll('.numberWithCommas td'),
    i;

for (i in elements) {
    if (elements[i].innerHTML !== undefined) {
        elements[i].innerHTML = numberWithCommas(elements[i].innerHTML);
    }
}

Demo

To explain all this code:

This is your function:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

This allows us to get all the td within all trs with numberWithCommas as a class and sets them all as an array in the javascript variable elements:

var elements = document.querySelectorAll('.numberWithCommas td'),
    i;

We then loop through the array accessing one td at a time:

for (i in elements) {
    ...
}

Inside the for loop we check that the value of the cell is not empty:

if (elements[i].innerHTML !== undefined) {
    ...
}

Inside the if statement we call the function numberWithCommas() and pass it the value of elements[i].innerHTML. We then get back the resulting string and apply it to elements[i].innerHTML:

elements[i].innerHTML = numberWithCommas(elements[i].innerHTML);

score 1 · Answer 2 · answered Nov 29 '12 at 00:14

You need to iterate over each td and apply this function..

var tr = document.getElementsByClassName('numberWithCommas');

for (var i = 0, len = tr.length; i < len; i++) {
    for(var j=0,len1 = tr[i].children.length;j<len1; j++){
        var td = tr[i].children[j];
        td.innerHTML= numberWithCommas(td.innerHTML)
    }
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

Check Fiddle

Using jQuery

$('table tr.numberWithCommas').each(function(){
    var $tr = $(this);
    $tr.find('td').each(function(){
        var $td = $(this);
        $td.html(function(){
            return  numberWithCommas(this.innerHTML);
        });
    });        
});

jQuery Fiddle

@gibberish the code runs automatically. If he wanted a trigger for it, he could put it in its own function and call it. — aug, Nov 29 '12 at 00:21

Apply javascript function to an html element

2 Answers2