[英]HTML/JavaScript: How can I round off the values in an input type=number having a read-only option
我找不到有關如何舍入具有只讀選項的輸入 type=number 中的值的解決方案。
表格的 HTML 代碼：
<table cellspacing="0" cellpadding="1" style="border-collapse: collapse;" width="">
<thead>
<tr style="background-color: rgb(255, 255, 255);">
<td style="text-align: center; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"></span><span style="font-family: Arial; font-size: 10pt;"><b>FUNCTION NAME</b></span><b><br></b></td>
<td style="text-align: center; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"></span><span style="font-family: Arial; font-size: 10pt;"><b>ORGANIZATIONAL OUTCOMES/KEY RESULTS AREA</b></span><b><br></b></td>
<td style="text-align: center; width: 341px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"><b>QUALITY + OBJECTIVES</b></span><b><br></b><span style="font-family: Arial; font-size: 10pt;"><b> (TARGETS + MEASURES)</b></span></td>
<td style="text-align: center; width: 437px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"><b>ACTUAL ACCOMPLISHMENTS</b></span></td>
<td style="text-align: center; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" colspan="4"><span style="font-family: Arial; font-size: 10pt;"><b>RATING</b></span></td>
<td style="text-align: center; width: 366px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"><b>REMARKS</b></span></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td style="text-align: center; width: 44px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>Q</b></span></td>
<td style="text-align: center; width: 49px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>E</b></span></td>
<td style="text-align: center; width: 44px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>T</b></span></td>
<td style="text-align: center; width: 47px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>A</b></span></td>
</tr>
</thead>
@foreach($ipcrcsassocp as $row)
<input type="hidden" value="{{$row->form_id}}" name="form_id[]">
<input type="hidden" value="{{$row->function_name}}" name="function_name[]">
<input type="hidden" value="{{$row->id}}" name="mfo_id[]">
<tbody>
<tr>
<td style="text-align: left; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->function_name !!}</td>
<td style="text-align: left; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->mfo_desc !!}</td>
<td style="text-align: left; width: 341px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->success_indicator_desc !!}</td>
<td style="text-align: left; width: 437px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->actual_accomplishment_desc !!}</td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
<select name="Q[]" class="form-control form-control-sm q-value" style="width: 50px">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
<select name="E[]" class="form-control form-control-sm e-value" style="width: 50px">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
<select name="T[]" class="form-control form-control-sm t-value" style="width: 50px">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
</td>
<td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
<div class="form-label-group">
@if($row->function_name == 'Core Functions')
<input type="number" oninput="setFourNumberDecimal(this)" class="form-control form-control-sm a-value-core" name="A[]" style="width: 50px" readonly>
@elseif($row->function_name == 'Support Functions')
<input type="number" oninput="setFourNumberDecimal(this)" class="form-control form-control-sm a-value-support" name="A[]" style="width: 50px" readonly>
@endif
@if($row->function_name == 'Research and Extension Services')
<input type="number" oninput="setFourNumberDecimal(this)" class="form-control form-control-sm a-value-research" name="A[]" style="width: 50px" readonly>
@endif
</div>
</td>
<td style="text-align: center; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->remarks !!}</td>
</tr>
</tbody>
@endforeach
</table>
Function：
function setFourNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(4);
};
輸入中的值也由 Jquery function 計算，所以我在其中插入了 setFourNumberDecimal()。
//COMPUTE THE AVERAGE PER ROW
$(".q-value, .e-value, .t-value").change(function(){
let currentRow = $(this).closest('tr');
let EValue = parseFloat(currentRow.find('.e-value').val());
let QValue = parseFloat(currentRow.find('.q-value').val());
let TValue = parseFloat(currentRow.find('.t-value').val());
currentRow.find('.a-value-core').val((EValue + QValue + TValue ) / 3);
currentRow.find('.a-value-support').val((EValue + QValue + TValue ) / 3);
currentRow.find('.a-value-research').val((EValue + QValue + TValue ) / 3);
setFourNumberDecimal();
computeAvg();
computeWeightedScore();
});
預期的 output 應將輸入類型中的值四舍五入到小數點后 4 位。
這是我的問題如何解決的分步說明。
function setFourNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(4);
};
setFourNumberDecimal ，如 @ihorbond 注釋部分所述$(".a-value-core, .a-value-support, .a-value-research, #core-total-average, #support-total-average, #research-total-average, #total-weighted-score").trigger("change")
setFourNumberDecimal();
onchange="setFourNumberDecimal(this)"
我可以使<span>外觀看起來像是只讀且固定大小的</span> <span><input type=“text” ></span> <span>使用CSS或JavaScript？</span>
[英]Can I make the <span> looks like a read-only and fixed size 's <input type=“text” > using css or javascript?
如何使用HTML刪除具有只讀格式和輸入類型的重疊
[英]How to Remove Overlapping with read-only format and input type using HTML
使用HTML和CSS時，如何將類應用於已經是只讀的字段？
[英]When using HTML and CSS, how can I apply a class to a field that is already read-only?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.