jquery - 所有文本字段中的值计算时出现问题

Question

我正在实现 MVC 应用程序，其中每当用户输入 Count 字段的值时，我都会尝试动态计算并显示所有 tr 元素的计算结果。我的静态值来自 -

public class Adjustment
{
    public int Id { get; set; }
    public int Size { get; set; }
    public int Pieces { get; set; }
    public int Count{ get; set; }
}

public ActionResult Create()
{
    var adjustments = from adjustment in AddAdjustment() select adjustment;
    ViewBag.AdjustmentList = adjustments;
    return View();
}

private List<Adjustment> AddAdjustment()
{
    List<Adjustment> AdjustmentList = new List<Adjustment>();
    Adjustment oAdjustment = new Adjustment();
    oAdjustment.Id = 1;
    oAdjustment.Size = 10;
    oAdjustment.Pieces = 12;
    oAdjustment.Count = 2;
    AdjustmentList.Add(oAdjustment);
    oAdjustment = new Adjustment();
    oAdjustment.Id = 2;            
    oAdjustment.Size = 20;           
    oAdjustment.Pieces = 11;
    oAdjustment.Count = 1;
    AdjustmentList.Add(oAdjustment);
    return AdjustmentList;
}

我的 jQuery 代码是-

<script type="text/javascript">
    $(document).ready(function () {
        $('#Count').blur(function()
        {
            var count = $('#Count').val();
            var bundalSize = $('#BundalSize').text();
            var totalPieces = count*bundalSize;
            $('#Pieces').val(totalPieces);
        });
    });
</script>

这是我的 table -

<table class="table table-striped table-hover">
    <thead>
    <tr>
        <th>
            Bundal Size
        </th>
         <th>
            Count
        </th>
         <th style="border-right:solid #e8eef4 thick;">
            Pieces
        </th>           
        <th>
            Count
        </th>
        <th>
            Pieces
        </th>         
    </tr>
</thead>
<tbody>
    @foreach (var item in ViewBag.AdjustmentList)
    {
        <tr>
            <td style="width:100px;" id="BundalSize">
               @item.Size
            </td>        
            <td style="width:90px;">
               @item.Count
            </td>
            <td style="width:180px; border-right:solid #e8eef4 thick;">
              @item.Pieces
            </td>
            <td>    
                  <input id="Count" type="text" style="width:100px ;height:15px ;margin:1px" />
            </td>
            <td>    
                  <input id="Pieces" type="text" style="width:100px ;height:15px ;margin:1px" disabled />
            </td>             
        </tr>
    }
</tbody>
</table>

当我尝试计算 blur 事件的乘法时，它仅对表中的第一条记录产生结果。我想对每条记录的每个 id="Count" 进行计算。有什么解决办法吗？

Answer 1

使用class而不是id，例如，

<td style="width:100px;" class="BundalSize">
     @item.Size
</td> 
<td>    
    <input class="Count" type="text" style="width:100px ;height:15px ;margin:1px" />
</td>
<td>    
    <input class="Pieces" type="text" style="width:100px ;height:15px ;margin:1px" disabled />
</td> 

更改您的 jquery 代码，例如，

$(document).ready(function () {
    $('.Count').blur(function() {
        var $parent = $(this).closest('tr');// for current row
        var count = parseFloat($(this).val()); // use parseInt if integer
        var bundalSize = parseFloat($parent.find('.BundalSize').text());
        var totalPieces = count*bundalSize;
        $parent.find('.Pieces').val(totalPieces);
    });
});