javascript - 计算输入字段的动态数量之间的百分比

Question

我需要显示每个输入值占完整数据集的百分比。

因此，如果用户输入 3、2 和 1。“百分比”输入字段应显示“50、30 和 20”

问题是，我不知道表单将获得多少输入。它可以是从 1 到任何数字。

源 html 代码是由我创建的局部 View 创建的。输出是:

<table>
    <tr>
        <th>Name</th><th>Distributiob key</th><th>Percent</th>
    </tr>

<tr>
    <td>
        House 1
    </td>
    <td>
        <input type="text" size="5" value="0" id="LightPhysicalEntities_0__DistributionKey" name="LightPhysicalEntities[0].DistributionKey" />
    </td>
    <td>
        <input type="text"  size="5" id="LightPhysicalEntities_0__Percent" readonly=readonly />
    </td>
</tr>
<tr>
    <td>
        House 2
    </td>
    <td>
        <input type="text" size="5" value="0" id="LightPhysicalEntities_1__DistributionKey" name="LightPhysicalEntities[1].DistributionKey" />
    </td>
    <td>
        <input type="text"  size="5" id="LightPhysicalEntities_1__Percent" readonly=readonly />
    </td>
</tr>
<tr>
    <td>
        House 3
    </td>
    <td>
        <input type="text" size="5" value="0" id="LightPhysicalEntities_2__DistributionKey" name="LightPhysicalEntities[2].DistributionKey" />
    </td>
    <td>
        <input type="text"  size="5" id="LightPhysicalEntities_2__Percent" readonly=readonly />
    </td>
</tr>

表中的第一个字段是标题或名称。二是用户在哪里打分配号。第三个是带有计算百分比的只读字段。

计算应该在 javascript 中完成，但我不太清楚如何开始、获取输入和设置输出。

Answer 1

这样的函数应该会有所帮助(这会降低百分比 - 如果您想以不同的方式处理，请替换 Math.floor):

function calcPcts() {
    var distributions = $("[id$=DistributionKey]");

    // Get the base first
    var base = 0;
    distributions.each(function () {
        base += window.parseInt($(this).val(), 10);
    });

    // Now calculate the percentages of the individual ones
    distributions.each(function () {
        var input = $(this),
            val = window.parseInt($(this).val(), 10),
            pct = (val === 0) ? val : Math.floor((val / base) * 100);
        $("#" + input.attr("id").replace("DistributionKey", "Percent")).val(pct);
    });
}