Question

这是我的模型

public List<ModelNomeTel> NomeTels { get; set; }

public class ModelNomeTel
{
    public string Nome { get; set; }
    public string Telefone { get; set; }
}public class ModelNomeTel
{
    public string Nome { get; set; }
    public string Telefone { get; set; }
}

HTML输入和列表显示

<div class="row">
    <div class="col-sm-6">
        <div class="form form-horizontal">
            <div class="form-group">
                <label>Nome:</label>
                <input type="text" id="textNome" class="form-control" />
            </div>
            <div class="form-group">
                <label>Telefone:</label>
                <input type="text" id="textTel" class="form-control" />
            </div>
            <div class="form-group">
                <label>&nbsp;</label>
                <button id="buttonAdicionar" type="button"
                    class="btn btn-primary">
                    Adicionar</button>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-horizontal">
            <table id="tablePost" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Telefone</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div class="form-group">
                <label>&nbsp;</label>
                <button id="buttonPost" type="submit"
                    class="btn btn-primary">
                    Postar</button>
            </div> 
        </div>
    </div>

要添加JavaScript。

<script type="text/javascript">
    $(document).ready(function () {
        $("#buttonAdicionar").on("click", function () {
            var nome = $("#textNome").val();
            var tel = $("#textTel").val();
            $("#tablePost > tbody").append("<tr data-nome='" + nome + "' data-tel='" + tel + "'><td>" + nome + "</td><td>" + tel + "</td></tr>");
            $("#textNome").val('');
            $("#textTel").val('');
            $("#textNome").focus();
        });

        $("#buttonPost").on("click", function () {
            var listName = "NomeTels";
            var qtd = 0;
            $("#tablePost > tbody > tr").each(function () {
                var nome = $(this).data("nome");
                var tel = $(this).data("tel");
                $("#formPost").prepend("<input type='hidden' name='" + listName + "[" + qtd + "].Nome' value='" + nome + "'>");
                $("#formPost").prepend("<input type='hidden' name='" + listName + "[" + qtd + "].Telefone' value='" + tel + "'>");
                qtd += 1;
            });
        });
    });
</script>

我可以添加删除行的选项吗？有可能吗？因为如果你从索引中删除一个项目，我担心，列表中的下一个元素不会发布。

Answer 1

使用此：

$('#button').on('click',function(e){
    $('tr:last').remove();
});

每次单击时，这将删除HTML文档中的最后一行。这里#button是您的按钮的ID，它将删除行。

从动态html列表中删除项目

1 个答案: