Question

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

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

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

源html代码由我创建的局部视图创建。输出是：

<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);
    });
}

Answer 2

如果在输入字段中添加一个类，则可以使用jQuery获取该类的项目数。然后，您可以获取值并执行计算。

以下是一个例子：

var inputCount = $(".inputfield").length;

$("input[type='text']").change(function() {
    var total = GetTotal();
    for (i = 0; i < inputCount; i++) {
        var inputValue = $('#LightPhysicalEntities_' + i + '__DistributionKey').val();
        if (total != 0) {
            var percent = inputValue / total;
            $('#LightPhysicalEntities_' + i + '__Percent').val(percent);
        }
    }
});

function GetTotal() {
    var total = 0;
    for (i = 0; i < inputCount; i++) {
        var inputValue = $('#LightPhysicalEntities_' + i + '__DistributionKey').val();
        total += parseInt(inputValue);
    }
    return total;
}

以下是脚本工作的示例：http://jsfiddle.net/ZWuQr/

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

2 个答案: