使用jquery在文本框中动态添加值

Question

我有 Razor UI，其中有 3 列，如下所示：

DEnom  amt   totalamt
$1     0     0
$5     4     20
$10    1     10
$50    0     0
$100   2     200

Total  7     230

这里的面额可能会不时变化。

因此使用 for 循环填充 UI，如下所示：

@for (int count = 0; count < Model.Bill.Count(); count++)
{
    <tr>
        <td>
            @Html.LabelFor(m => m.Bill[count].BillDenom)
        </td>
        <td>
            @Html.TextBoxFor(m => m.Bill[count].Count)
        </td>
        <td>
            @Html.TextBoxFor(m => m.Amount)
        </td>
    </tr>
}

现在，如果我为每个面额输入金额，则应动态计算相应的总金额和总金额。如何使用 jQuery 实现这一点。

Answer 1

为所有控件动态生成 ID，同时生成它们，例如 Denom_+count、amt_count 和 totalamt_+count。

给 Denom 文本框一个类，并在 jquery on event 中编写 keyup 功能

$(document).on('keyup','.SpecifiedClass',function(){
  var id=$(this).attr('id');
  var pointer=id.split('_')[1];
  //Now you have the pointer to that row so you can calculate the other 
  //controls value and use the logic for summation
})

Answer 2

最简单的方法是为每个文本框添加一个标识符，以便您可以使用 jQuery 轻松找到它们并获取当前值。我推荐一个类，因为这些可以重复而不会生成无效的 HTML。

@for (int count = 0; count < Model.Bill.Count(); count++)
{
   <tr>
     <td>
        @Html.LabelFor(m => m.Bill[count].BillDenom)
     </td>
     <td>
        @Html.TextBoxFor(m => m.Bill[count].Count, new {@class = "Count"})
     </td>
     <td>
        @Html.TextBoxFor(m => m.Amount, new {@class = "Amount"})
     </td>
  </tr>
}
<!--Create placeholders with IDs for the total amounts-->
<span id="TotalCount"></span>
<span id="TotalAmount"></span>

现在，我们需要为每个文本框添加处理程序，以便 jQuery 知道何时需要计算更新量。

<script type="text/javascript">
    $(function(){
         $(".Amount").on("focusout", function(){
              RecalculateItems();
         });
         $(".Count").on("focusout", function(){
              RecalculateItems();
         });         
    })
</script>

最后，我们需要实现RecalculateItems() 函数，它将遍历所有项目并相应地总结它们。

function RecalculateItems(){
    var totalCount = 0;
    var totalAmount = 0;
    $(".Count").each(function(){
        //loop through each item with the class Count, parse as integer and add to running total
        totalCount += parseInt($(this).val());
    });
    $(".Amount").each(function(){
        //same as above, except with items with Amount class
        totalAmount += parseInt($(this).val());
    }); 
    //set inner html of each span identified above with the correct values
    $("#TotalAmount").html(totalAmount);
    $("#TotalCount").html(totalCount);
}

Answer 3

试试下面的代码：

将类名的 HTML 代码修改为 <td>

<tr>
    <td class="denom">@Html.LabelFor(m => m.Bill[count].BillDenom)</td>
    <td class="amtcount">@Html.TextBoxFor(m => m.Bill[count].Count)</td>
    <td class="totalamount">@Html.TextBoxFor(m => m.Amount)</td>
</tr>

建议的 jQuery 代码

function CountFooter()
{
    var amtCount = 0;
    var totalamount = 0;
    $('table tr').each(function(){
        amtCount +=  parseInt($(this).find('td.amtcount').html(),10);

        totalamount +=  parseInt($(this).find('td.totalamount').html(),10);
    });

    //use amtCount and totalamount to print total value in this row
}

Answer 4

像其他答案中建议的那样，将标识符添加到您的输入文本框中。

下面的代码只会改变相应的修改数量。同时更新总和。

    $("td input.count").change(function(){
        var denom = parseInt($(this).parent().prev().find(".denom").val()); //getting corresponding denomination
        var amount = parseInt($(this).val()) *denom; //multiplying modified count with denomination
        $(this).parent().next().find(".amount").attr("value",amount); populating new amount 
        populateTotalAmt(); //total amount
    })

    function populateTotalAmt(){
        var totalamount=0;
        $(".amount").each(function(){
            totalamount+=parseInt($(this).val());
        });
        alert(totalamount); //you can populate total amount anywhere in the page according to your requirement.
    }

希望这会有所帮助:)