Question

我正在尝试使用html和javascript创建功能性工资表，该表根据每一行的输入来计算每个员工的工资。

为此，我使用循环为表的每一行中的总单元格生成了一个不同的id。问题是，当我尝试访问创建表的循环中的每个ID时，javascript函数将使用所创建表的最后一个ID名称，而不是使用该函数调用行中的当前ID。如何仅使用javascript和html获得正确的ID？

This is my html code:
@foreach (var item in Model.CurrentUnpaidWages)
{
<tr>
    @{ id = Convert.ToString(Model.Employees[i].PersonID);}

    <td>
        @Model.Employees[i].FirstName   @Model.Employees[i].LastName
    </td>
    <td id="WagePerHour">
        @Html.DisplayFor(modelItem => item.WagePerHour)
        @{wagePerHour = Convert.ToDecimal(item.WagePerHour);}
    </td>
    <td>
        @{ id = Convert.ToString(Model.Employees[i].PersonID);}
        <div class="form-group">
            <div class="col-md-10">

                <input oninput="GetWagePerMonth(this)" id=@id type="number" 
                     min="1" />
                @Html.ValidationMessageFor(model => model.Wage.HoursPerMonth, 
                 "", new { @class = "text-danger" })

            </div>
        </div>
    </td>
    <td><div id="d"@id></div></td>



    <td> @Html.DisplayFor(modelItem => item.Bonus)</td>
    <td>@Html.DisplayFor(modelItem => item.Paid)</td>
    @{i++;}

    <td></td>

</tr>

这是我的功能：

function GetWagePerMonth(idx) {

    var h =idx.id;
    alert( "d" + idx.id);
    var wage = document.getElementById("WagePerHour").innerHTML;
    var wagePerHour = @wagePerHour;
    var wagePerMonth = wage * wagePerHour;
   wagePerMonth = round(wagePerMonth, 2).toFixed(2);

  document.getElementById("d" + idx.id).innerHTML = wagePerMonth;

 }

提前谢谢！

编辑：我已经编辑了我的代码。往上看。现在，我每次都在警报中获取正确的ID，但是该功能不会更改div id = @ id的文本。 div保持为空。我希望每次我在输入中输入一个金额：然后根据功能将正确的文本输入div id = @ id。目前，什么都没有发生。

Answer 1

<input oninput="GetWagePerMonth(this)" id=@id type="number" min="1" />

将<td id=@id"></td >改成<div id="d"@id></div >

，您的函数将以

的身份访问ID

 function GetWagePerMonth(idx) {
    alert(idx.id); /*  */
    var wage = document.getElementById("WagePerHour").innerHTML;
    var wagePerHour = @wagePerHour;
    var wagePerMonth = wage * wagePerHour;
    wagePerMonth = round(wagePerMonth, 2).toFixed(2);
    document.getElementById("d"+idx.id).innerHTML = wagePerMonth;

}

请改用此方法，看看是否收到任何答复。

  function GetWagePerMonth(idx) {
        alert(idx.id); /*  */
        document.getElementById("d"+idx.id).innerHTML = "Test Value";
     }

希望这可以帮助您找到可以即兴使用的解决方案

编辑：

创建新功能

function CallMyFunc(){
           for(i=0,i < 10, i++){
                   GetWagePerMonth(i) ;
                     }
            }

在HTML部分中，让我们看看是否可以创建一个按钮来调用该函数

<input type = "button" onClick="javascript:CallMyFunc()"/>

使用JavaScript从循环中获取正确的元素ID的函数出错

1 个答案: