javascript - 在输入类型文本中将小数点右对齐

Question

我想将数字格式化为小数点后两位，还想对齐，即不希望某些数字居中，某些左对齐等。我不知道这有多容易，但想在小数点上对齐。有点像这样:

 123.44
1465.23
  12.24

只要所有数字有两个 dp，右对齐就可以。不希望数字看起来像这样:

1554
23.75

它们应该是这样的:

1554.00
  23.75

HTML代码

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

这是上表的图像想要对齐具有的总列

Answer 1

您将不得不使用 css text-align: right 属性和 JavaScript 掩码。

这个 jQuery 插件是我很幸运的一个:

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

例子:

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