Javascript update to HTML table cell (from thousands to millions)

Question

I need to create some javascript on my web report which converts table values to thousands or millions (eg divides or multiplies by 1000).

The trouble is that each value is 'clickable' (ie it is wrapped in an anchor tag).

Is this possible?

<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. basically the aim is to have a 'thousands' and a 'millions' button so that the values of the table can become 11,372k or 11.4m etc...

Answer 1

I would start thinking about document.getElementsByClassName('nums'), which will give you an array of your elements. Something like this:

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

This likely only works in newer browsers, though, so you may want to use a similar method in a javascript framework. Jquery allows getting elements by classname with the selector

$('.nums')

Answer 2

I would use jQuery

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

In response to your edit: Since I'm bored I wrote this piece of working code for you, round and insert ',' as you see fit.

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

<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>