Align decimal points to right in input type text

Question

I want to format the numbers to two decimal places and also want to aligned the, ie don't want some numbers centered, some left aligned, etc. I don't know how easy this is to do, but want to do alignment on the decimal point.Kind of like this:

 123.44
1465.23
  12.24

Right align is ok as long as all numbers have two dp. Don't want numbers to look like this:

1554
23.75

They should look like this:

1554.00
  23.75

HTML Code

 <table class="table grey-table">
    <thead>
        <tr>
            <th style="padding:1px 8px;">Description</th>
            <th style="padding:1px 8px;">Total</th>
        </tr>
    </thead>
    <tr>
    <td style="padding:1px 8px;">Countertops</td>
    <td style="width:150px;"><input type="text" id="txt_cm_countertops" readonly="true" style="width:150px;"/></td>
    </tr>
    <tr>
    <td style="padding:1px 8px;">Li In.</td>
    <td style="width:150px;"><input type="text" id="txt_cm_countertops_lf" readonly="true" style="width:150px;"/></td>
    </tr>
    <tr>
    <td style="padding:1px 8px;">Bowls</td>
    <td style="width:150px;"><input type="text" id="txt_cm_bowls" readonly="true" style="width:150px;"/></td>
    </tr>
    <tr>
    <td style="padding:1px 8px;">Side Splashes</td>
    <td style="width:150px;"><input type="text" id="txt_cm_sidesplashes" readonly="true" style="width:150px;"/></td>
    </tr>
    <tr>
    <td style="padding:1px 8px;">Subtops</td>
    <td style="width:150px;"><input type="text" id="txt_cm_subtops" readonly="true" style="width:150px;"/></td>
    </tr>
  </table>

<sript>
var I = 24; //These values are for demo. These are not hardcorded
var J = 15.5;
var K = 4;
var L = 4;
var M = 21.4;

$("#txt_cm_countertops").val(I);    
$("#txt_cm_countertops_lf").val(J); 
$("#txt_cm_bowls").val(K);  
$("#txt_cm_sidesplashes").val(L);   
$("#txt_cm_subtops").val(M);

</script>

This is the image of the above table Want to align the Total Column Having

Answer 1

You will have to use the css text-align: right attribute and JavaScript mask.

This jQuery plugin is one I've had good luck with:

http://digitalbush.com/projects/masked-input-plugin/

Example:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
  // Find a field with an ID of 'myNum' and mask it display a two digit number
  $("#myNum").mask("9.99");
  // Add mask of two digit number to anything with a class of 'twodigit'
  $(".twodigit").mask("9.99");
  // Really old browsers don't like the class method so you have to run a for/each
  // loop by class name
  $(".twodigit").each(function(){
     $(this).mask("9.99");
  });

});
</script>