[英]Align decimal points to right in input type text
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. 只要所有数字都有两个dp,就可以右对齐。 Don't want numbers to look like this:
不想数字看起来像这样:
1554
23.75
They should look like this: 它们应如下所示:
1554.00
23.75
HTML Code 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>
This is the image of the above table Want to align the Total Column Having 这是上表的图像要对齐具有以下内容的总列
You will have to use the css text-align: right attribute and JavaScript mask. 您将必须使用css text-align:right属性和JavaScript mask。
This jQuery plugin is one I've had good luck with: 这个jQuery插件是我很幸运的一个插件:
http://digitalbush.com/projects/masked-input-plugin/ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.