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 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 code赞，

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

Answer 2

使用for代替foreach，并将计数器i的值附加到ID

<td style="width:100px;" id="BundalSize@i">
....
<input id="Count@i" type="text" style="width:100px ;height:15px ;margin:1px" onblur="Calc('@i');" />
....
<input id="Pieces@i" type="text" style="width:100px ;height:15px ;margin:1px" disabled />

....

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

Answer 3

尝试使用parseFloat：

var bundalSize = parseFloat($('#BundalSize').text());

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

3 个答案: