我在应用程序中构建了一个表,当我单击"删除"时,该表将删除提交时删除的行后面的所有行.这意味着,用户只需删除一行,就可以看到表的外观,但当它在post操作中点击viewmodel时,后续的行就不包括在内.
我添加了一些非常复杂的代码,这些代码到处都是,用来编辑行的索引值,但最终使问题更加混乱,一些值替换了其他值,而一些值只是被设置为0.我知道必须有一个更简单的方法.
我将此示例设置回更简化的版本,其中删除操作似乎运行良好,但在点击控制器时,viewModel中不包含任何后续值.
这是HTML表格
<input type="button" value="Add" class="button is-primary" id="btnAdd" />
<table id="tblPart" style="table-layout:fixed; width:100%;">
<thead>
<tr>
<th>
Part Number
</th>
<th>
Quantity
</th>
<th></th>
</tr>
</thead>
<tbody>
@for (var i = 0; i < Model.NumberModel.Count(); i++)
{
<tr >
<td >
@Html.TextBoxFor(modelItem => Model.NumberModel[i].PartNum, new { id = $"part{i}", required = "required", @class = "partTest" })
</td>
<td>
@Html.TextBoxFor(modelItem => Model.NumberModel[i].Quantity, new { type = "number", min = "0", id = $"quantity{i}", required = "required" })
</td>
<td>
<input type='button'
onclick='Remove(this)'
value='Remove' />
</td>
</tr>
}
</tbody>
</table>
这是JS
<script>
function Remove(button) {
//Determine the reference of the Row using the Button.
var row = $(button).closest("TR");
var name = $("TD", row).eq(0).html();
//console.log(row + name);
var index = 0;
var table = $("#tblPart")[0];
//Delete the Table row using it's Index.
table.deleteRow(row[0].rowIndex);
}
</script>
谢谢你的帮助.