Question

我真的可以帮到你！我需要总结一个动态数量的文本框，但我的JavaScript知识是一周的方式来实现这一目标。有人可以帮帮我吗？我希望函数在名为inptSum的p-tag中打印总和。

这是一个函数和html代码：

function InputSum() {
    ...
}

<table id="tbl">
<tbody>
    <tr>
        <td align="right">
            <span>June</span>
        </td>
        <td>
            <input name="month_0" type="text" value="0" id="month_0" onchange="InputSum()" />
        </td>
    </tr>
    <tr>
        <td align="right">
            <span>July</span>
        </td>
        <td>
            <input name="month_1" type="text" value="0" id="month_1" onchange="InputSum()" />
        </td>
    </tr>
    <tr>
        <td align="right">
            <span>August</span>
        </td>
        <td>
            <input name="month_2" type="text" value="0" id="month_2"  onchange="InputSum()" />
        </td>
    </tr>
    <tr>
        <td align="right">
            <span>September</span>
        </td>
        <td>
            <input name="month_3" type="text" value="0" id="month_3" onchange="InputSum()" />
        </td>
    </tr>
    </tbody>
</table>

<p id="inputSum"></p>

Answer 1

function InputSum() {
    var inputs = document.getElementsByTagName("input"); 
    for (var i = 0; i < inputs.length; i++) { 
        if(inputs[i].id.indexOf("month_") == 0) 
            alert(inputs[i].value); 
    }
}

Answer 2

function InputSum() {
   var month_0=document.getElementById("month_0").value;// get value from textbox
  var month_1=document.getElementById("month_1").value;
  var month_2=document.getElementById("month_2").value;
   var month_3=document.getElementById("month_3").value;
   // check number Can be omitted the

   alert(month_0+month_1+month_2+month_3);//show result 
}

Answer 3

使用jQuery，您可以使用attribute starts with选择器轻松完成。然后我们遍历它们，将它们的值解析为整数并总结它们。像这样：

function InputSum() {
    var sum = 0;
    $('input[id^="month_"]').each(function () {
        sum += parseInt($(this).val(), 10);
    });
    $("#inputSum").text(sum);
}

如果将代码修改为以下内容，您甚至可以删除每个输入上的onchange属性：

$(function () {
    var elms = $('input[id^="month_"]');
    elms.change(function() {
        var sum = 0;
        elms.each(function () {
            sum += parseInt($(this).val(), 10);
        });
        $("#inputSum").text(sum);
    });
});

JavaScript文本框的总结

3 个答案: