如何舍入具有只读选项的输入type=number中的值

Question

我找不到一个解决方案来解决如何对具有只读选项的输入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>&nbsp;(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 setFourNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(4);
    };

输入中的值也是由Jquery函数计算的，所以我在其中插入了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();
    });

预期输出应将输入类型中的值四舍五入到小数点后4位。

Answer 1

下面是我的问题如何解决的一步一步。

1. 在脚本标记

内创建函数

function setFourNumberDecimal(el) {
  el.value = parseFloat(el.value).toFixed(4);
};

1. 创建使用.trigger函数的Jquery脚本，并调用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();

然后，

1. 将其添加到输入元素

中

onchange="setFourNumberDecimal(this)"