Adjusting Javascript code to convert numerical values in HTML table cells from thousands to millions

Question

Adjusting Javascript code to convert numerical values in HTML table cells from thousands to millions

Does anyone know how to create a Javascript function for a web report that converts table values to thousands or millions by dividing or multiplying by 1000?

The issue is that each value is clickable, meaning it is wrapped in an anchor tag.

Is there a way to achieve this?

<table class="Table" >
<thead><tr>
  <th class="l Header" scope="col">£000s</th>
  <th class="l Header" scope="col">Col1</th>
  <th class="l Header" scope="col">Col2</th>
</tr></thead>
<tbody>
<tr>
  <td class="l Data">   My Data Row </td>
  <td class="l Data">   <a class=nums href="javascript:MyFunc();">  11,372,397</a></td>
  <td class="l Data">   <a class=nums href="javascript:MyFunc();">  11,344,327</a></td>
</tr>
</tbody>

edit

I am using IE6. The goal is to have buttons for 'thousands' and 'millions' so that the table values can be displayed as 11,372k or 11.4m, etc.

javascript html css html-table

Answer 1

Answer №1

If I were to choose a library, I'd go with jQuery

$(function (){
    $.each($('.nums'), function () {
        $(this).html(Number($(this).html().replace(/,/g,"")) /*your calculation here*/);
    });
});

Regarding your recent revision: Feeling a bit bored, I whipped up this functional code snippet for you to play around with, rounding and adding commas as desired.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<table class="Table" >
<thead><tr>
  <th class="l Header" scope="col">£000s</th>
  <th class="l Header" scope="col">Col1</th>
  <th class="l Header" scope="col">Col2</th>
</tr></thead>
<tbody>
<tr>
  <td class="l Data">   My Data Row </td>
  <td class="l Data">   <a class="nums" href="javascript:MyFunc();">  11,372,397</a></td>
  <td class="l Data">   <a class="nums" href="javascript:MyFunc();">  11,344,327</a></td>
</tr>
</tbody>

<input type="button" onclick="toMillions();"> 
<input type="button" onclick="restore();"> 

<script type="text/javascript">

    $(function (){
        $.each($('.nums'), function () {
            $.data(this, "theValue", $(this).html());
        }); 
    });


    function toMillions(){
        $.each($('.nums'), function () {
            $(this).html(Number($.data(this,"theValue").replace(/,/g,"")) / 1000000 + ' million');
        });
    }

    function restore(){
        $.each($('.nums'), function () {
                $(this).html($.data(this,"theValue"));
        });
    }
</script>

Answer 2

If I were to choose a library, I'd go with jQuery

$(function (){
    $.each($('.nums'), function () {
        $(this).html(Number($(this).html().replace(/,/g,"")) /*your calculation here*/);
    });
});

Regarding your recent revision: Feeling a bit bored, I whipped up this functional code snippet for you to play around with, rounding and adding commas as desired.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<table class="Table" >
<thead><tr>
  <th class="l Header" scope="col">£000s</th>
  <th class="l Header" scope="col">Col1</th>
  <th class="l Header" scope="col">Col2</th>
</tr></thead>
<tbody>
<tr>
  <td class="l Data">   My Data Row </td>
  <td class="l Data">   <a class="nums" href="javascript:MyFunc();">  11,372,397</a></td>
  <td class="l Data">   <a class="nums" href="javascript:MyFunc();">  11,344,327</a></td>
</tr>
</tbody>

<input type="button" onclick="toMillions();"> 
<input type="button" onclick="restore();"> 

<script type="text/javascript">

    $(function (){
        $.each($('.nums'), function () {
            $.data(this, "theValue", $(this).html());
        }); 
    });


    function toMillions(){
        $.each($('.nums'), function () {
            $(this).html(Number($.data(this,"theValue").replace(/,/g,"")) / 1000000 + ' million');
        });
    }

    function restore(){
        $.each($('.nums'), function () {
                $(this).html($.data(this,"theValue"));
        });
    }
</script>

Answer 3

Answer №2

One approach could be to consider using document.getElementsByClassName('numbers'), as it will provide you with an array of the elements you need. Here is an example of how you could achieve this:

numbers = document.getElementsByClassName('numbers');
for (index in numbers)
   numbers[index].innerHTML = numbers[index] + ',000';

This method may be more compatible with newer browsers, so you might want to explore similar techniques in a javascript framework. For instance, jQuery offers a way to select elements by class name like so:

$('.numbers')

Answer 4

One approach could be to consider using document.getElementsByClassName('numbers'), as it will provide you with an array of the elements you need. Here is an example of how you could achieve this:

numbers = document.getElementsByClassName('numbers');
for (index in numbers)
   numbers[index].innerHTML = numbers[index] + ',000';

This method may be more compatible with newer browsers, so you might want to explore similar techniques in a javascript framework. For instance, jQuery offers a way to select elements by class name like so:

$('.numbers')

Adjusting Javascript code to convert numerical values in HTML table cells from thousands to millions

Answer №1

Answer №2

Similar questions

Tips for allowing specific tags using Google's Caja HTML Sanitizer in a node.js environment

What is the best way to implement a new search input for my datatable while also enabling the searchHighlight feature?

How can I center an element on the screen using CSS positioning?

Is there a way to make elasticX() and elasticY() only affect the upper bound in dc.js?

The inclusion of float: left disrupts the formatting of the list

Displaying an array in a tabular format using PHP

Mobile site experiencing slow scrolling speed

Storing a webpage in HTML with the use of @import function in CSS

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

Crafting an interactive form

Auth0 encountering issues retrieving ID token and user metadata

Support the Cause with Paypal Contributions on Angular/Bootstrap Website!

Incorporating PruneCluster into an AngularJS Leaflet Directive for Enhanced Mapping

What is the best way to make an exit pop up disappear when clicking on any area?

Is there a way to preserve the HTML template code as it is when saving it in a cell?

Where can I find the link to access three.js on the internet?

Angular only allows click events to trigger during a push

Sending Grunt Jade configurations to a specific file

I need to display the product name associated with the product_id found in the line_items array within the order table. I aim to achieve this functionality by utilizing Laravel with Vue.js

Creating a seamless design with a navigation brand and login button on the same row within a navbar