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

现在，如果我输入每个面额的金额，则应动态计算对应的总额amd totalamt。如何使用jQuery实现这一目标。

Answer 1

动态生成所有控件的ID，同时生成Denom_ + count，amt_count和totalamt_ + count。

将一个类提供给Denom文本框，并在事件的jquery中编写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

尝试使用以下代码：

修改了类名为<td>

的HTML代码

<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.
    }

希望这会有所帮助：）

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

4 个答案: