我有一个foreach来循环和填充表中的行。在表中，我调用了函数，并且需要唯一的 ID 来执行每一行的函数。它适用于第一行，因为它识别该行的 id，但下一行具有相同的 id。我试图做的是，当其中一行的字段发生变化时，它会计算一个值并在相应的行中输入另一个字段。
我的表如下
<table class="table">
<tr>
<th></th>
<th class="col1">MFC DRV</th>
<th class="col1">REF Flow (slpm)</th>
<th class="col1">Calibration Flow (slpm)</th>
<th class="col1">% Diff</th>
</tr>
@foreach (var item in Model.DILlist)
{
<tr>
<td>
@Html.HiddenFor(modelItem => item.MFC_PointsID, new { htmlAttributes = new { @id = item.MFC_PointsID } })
</td>
<td>
@Html.DropDownListFor(modelItem => item.selectedDRV, item.DRVs, htmlAttributes: new { style = "Width:75px", @id = "mfc" })
</td>
<td>
@Html.EditorFor(modelItem => item.RefFlow, new { htmlAttributes = new { @id = "refFlow", style = "Width:75px", onkeyup = "myFunction(this)" } })
</td>
<td>
@Html.EditorFor(modelItem => item.CalFlow, new { htmlAttributes = new { @id = "calFlow", @disabled = "disabled", style = "Width:75px" } })
</td>
<td>
@Html.EditorFor(modelItem => item.Diff, new { htmlAttributes = new { @id = "Diff", @disabled = "disabled", @class = item.Background, style = "Width:75px" } })
</td>
</tr>
}
<tr>
</table>
和我的JavaScript函数
function myFunction(a) {
var number = a.id;
$.ajax({
type: "POST",
//Dev
url: "/CertsHelper/FlowMeterDiffCheck",
//Test and Production
//url: "/RMS_SMM/CertsHelper/FlowMeterDiffCheck",
data: { calFlow: $('#calFlow').val(), refFlow: $('#refFlow').val() },
dataType: "json",
success: function (index) {
$("#Diff").val(index);
if ($("#Diff").val() <= 2 && $("#Diff").val() >= -2) {
$("#Diff").css('background', "lightGreen");
$("#Diff").val(index);
}
else {
$("#Diff").css('background', "indianred");
$("#Diff").val(index);
}
},
error: function (error) {
alert("%Diff not working: " + error);
}
});
}
我认为问题是您将重复的ID分配给DOM元素。通过连接属性名称和项 ID 为每个 HTML 元素指定一个唯一的 ID。
@Html.EditorFor(modelItem => item.RefFlow,
new { htmlAttributes =
new {
@id = $"refFlow_{item.MFC_PointsID}",
style = "Width:75px",
onkeyup = "myFunction(this)"
}
})
@Html.EditorFor(modelItem => item.RefFlow,
new { htmlAttributes =
new {
@id = $"Diff_{item.MFC_PointsID}",
style = "Width:75px"
}
})
在 JavaScript 函数中，通过拆分元素 ID 来检索项目 ID。还有其他方法可以做到这一点，但对我来说，这种方法简单易懂。
function myFunction(a) {
var itemID = a.id.split('_')[1];
...other code...
$('#Diff_' + itemID).val();
}