How to format data from table column with the same class using javascript

Question

i have table row inside a foreach looping that are have some columns with the same class, my question is how can i format each data in that column to be like ###,### (format number using comma) in javascript?

this is a sample for my table structure:

    <tbody id="binder">
<?php foreach () { ?>        
        <tr id="data">
            <td class="sum">400000</td>

            <td class="sum">500000</td>
            <td class="sum">500000</td>
            <td class="sum">0</td>
            <td class="sum">0</td>

            <td class="sum">500000</td>
            <td class="sum">500000</td>
            <td class="sum">0</td>
            <td class="sum">0</td>

            <td class="sum">500000</td>
            <td class="sum">500000</td>
            <td class="sum">0</td>
            <td class="sum">0</td>

            <td class="sum">500000</td>
            <td class="sum">500000</td>
            <td class="sum">0</td>
            <td class="sum">0</td>

            <td class="sum">500000</td>
            <td class="sum">500000</td>
            <td class="sum">0</td>
            <td class="sum">0</td>

            <td class="sum">500000</td>
            <td class="sum">500000</td>
            <td class="sum">0</td>
            <td class="sum">0</td>
        </tr>
<?php } ?>
    </tbody>

possible duplicate http://stackoverflow.com/questions/6134039/format-number-to-always-show-2-decimal-places — Lulylulu, Apr 14 '16 at 09:37
@Muhammad, you could look into `toLocaleString()` that means that it will format with comma for US but with spaces for France for example. — Lulylulu, Apr 14 '16 at 09:43
@Lulylulu, it is a different case. I mean how can i convert it manually creating any function to format all these data based on class='sum' in javascript? — Kotomono, Apr 14 '16 at 09:45

score 1 · Accepted Answer · edited May 23 '17 at 11:45

You can get all the elements with the specific class name and then format its innerHTML. below is a working snippet.

var allTds = document.getElementsByClassName("sum");

for (var i = 0; i < allTds.length; i++) {

  allTds[i].innerHTML = allTds[i].innerHTML.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

td{
   border:1px solid;
  }

<table>
  <tbody id="binder">
    <tr id="data">
      <td class="sum">400000</td>

      <td class="sum">500000</td>
      <td class="sum">500000</td>
      <td class="sum">0</td>
      <td class="sum">0</td>

      <td class="sum">500000</td>
      <td class="sum">500000</td>
      <td class="sum">0</td>
      <td class="sum">0</td>

      <td class="sum">500000</td>
      <td class="sum">500000</td>
      <td class="sum">0</td>
      <td class="sum">0</td>

      <td class="sum">500000</td>
      <td class="sum">500000</td>
      <td class="sum">0</td>
      <td class="sum">0</td>

      <td class="sum">500000</td>
      <td class="sum">500000</td>
      <td class="sum">0</td>
      <td class="sum">0</td>

      <td class="sum">500000</td>
      <td class="sum">500000</td>
      <td class="sum">0</td>
      <td class="sum">0</td>
    </tr>
  </tbody>
</table>

The regex reference taken from this answer. https://stackoverflow.com/a/2901298/2592042

your code works like a charm! that is what i mean. thanks for your help bro... nice to see you here. — Kotomono, Apr 14 '16 at 10:05

How to format data from table column with the same class using javascript

1 Answers1