javascript - 删除一行后更新动态创建的JS html表
问题描述
我有一个通过 javascript 动态创建的 HTML 表。填写一些字段后,单击“添加”按钮会在表格中添加一个新行。在表中插入几行后,表单被发送到 asp.net 核心控制器。
要动态创建表,我使用:
$("#btn-add").click(function () {
var index = $('#tblItensPedido tr').length - 1
var grife = $("#addGrife").val();
var modelo = $("#addModelo").val();
var cor = $("#addCor").val();
var calibre = $("#addCalibre").val();
var shape = $("#addShape").val();
var quantidade = $("#addQuantidade").val();
var valorTabela = $("#valorTabela").val();
var valorTotal = $("#valorTotal").val();
var markup = '<tr>\
<td>' + index + '</td>\
<td><input value="'+ grife + '" name="Itens[' + index + '].Grife" style="width:50px; border:none;"" readonly=readonly></input></td>\
<td><input value="'+ modelo + '" name="Itens[' + index + '].Modelo" style="width:55px; border:none;" readonly=readonly></input></td>\
<td><input value="'+ cor + '" name="Itens[' + index + '].Cor" style="width:50px; border:none;" readonly=readonly></input></td>\
<td><input value="'+ calibre + '" name="Itens[' + index + '].Tamanho" style="width:50px; border:none;" readonly=readonly></input></td>\
<td><input value="'+ shape + '" name="Itens[' + index + '].Shape" style="width:50px; border:none;" readonly=readonly></input></td>\
<td><input value="'+ quantidade + '" name="Itens[' + index + '].Quantidade" style="width:50px; border:none;" readonly=readonly></input></td>\
<td><input value="'+ valorTabela + '" name="Itens[' + index + '].ValorUnitario" style="width:100px; border:none;" id="currency" readonly=readonly></input></td>\
<td><input value="'+ valorTotal + '" style="width:100px; border:none;" readonly=readonly></input></td>\
<td><a class="btn btn-danger btn-sm btn-delete remover-linha" id="btn-deleta"><span class="fa fa-trash"></span></a></td>\
</tr>\ ';
$("table tbody").append(markup);
)};
并删除我使用的表上的一行:
$('#tblItensPedido').on('click', '.remover-linha', function () {
var indexDoRow = $(this).closest('tr').index();
console.log("index removido " + indexDoRow)
$(this).closest('tr').remove();
console.log('o index é ' + indexDoRow)
});
“index”变量用于在将发送到服务器的表上创建一个数组索引Itens[0].Grife
,然后在另一行上创建一个数组索引Index[1].Grife
,依此类推......
它工作正常,但是当我删除表上的一行时,我需要更新索引,因为如果我删除index[0]
(第一行),其他行从[1]
索引开始并且我的服务器崩溃。
删除行时有什么方法可以更新行的整个索引?
谢谢
解决方案
推荐阅读
- javascript - 在不使用 html 的情况下为文本着色
- django - 我应该在我的 models.py 中写什么来连接两个 ManyToMany 表单?
- gradle - 使用 jib-gradle-plugin 构建多项目 Dropwizard 应用程序
- java - C中的Java ByteBuffer?
- storybook - 故事书集组件到页面中心
- c# - 如何将方法返回类型设置为与其当前所在的类相同
- javascript - 喜欢和不喜欢功能期间 Firebase 函数中的错误 500
- html - 可以将 SVG 剪辑路径相对于其容器居中吗?
- c# - 如何使.net core web api能够接收来自任何子域的请求?
- java - TaskScheduler 无法添加节点