jQuery dynamic table

Question

I’m new to Development,and so on

  @model CeoScrum.Models.Funcionalidade
    @{
    ViewBag.Title = (Model != null && Model.Id > 0 ? "Edicao" : "Cadastro") + " de funcionalidade";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @section HeadSection{
    <script type="text/javascript">
    function Adicionar() {
        $("#tbFuncionalidadeAcao tbody").append(
            "<tr>"+
            "<td><input type='text'/></td>"+
            "<td><input type='text'/></td>"+
            "<td><img src='/CeoScrum/Content/css/icone/icon_add.png' class='btnAdicionar'/><img src='/CeoScrum/Content/css/icone/icon_excluir.png' class='btnExcluir'/></td>" +
            "</tr>");
        var par = $(this).parent().parent();
        var tdNome = par.children("td:nth-child(1)");
        var tdMnemonico = par.children("td:nth-child(2)");
        var tdBotoes = par.children("td:nth-child(3)");




        tdNome.html(tdNome.children("input[type=text]").val());
        tdMnemonico.html(tdMnemonico.children("input[type=text]").val());
        tdBotoes.html("<img src = '/CeoScrum/Content/css/icone/icon_editar.png' class = 'btnEditar'/><img src='/CeoScrum/Content/css/icone/icon_excluir.png' class='btnExcluir'/>");
        $(".btnEditar").bind("click", Editar);
        $(".btnExcluir").bind("click", Excluir);
        $(".btnAdicionar").bind("click", Adicionar);


        }
    
   
    function Salvar() {

        
    }

    function Editar() {
        var par = $(this).parent().parent();
        var tdNome = par.children("td:nth-child(1)");
        var tdMnemonico = par.children("td:nth-child(2)");
        var tdBotoes = par.children("td:nth-child(3)");

        tdNome.html("<input type = 'text' id='txtNome' value='" + tdNome.html() + "'/>")
        tdMnemonico.html("<input type = 'text' id='txtMnemonico' value='" + tdMnemonico.html() + "'/>")

        tdBotoes.html("<img src = '/CeoScrum/Content/css/icone/icon_add.png' class = 'btnAdicionar'/><img src='/CeoScrum/Content/css/icone/icon_excluir.png' class='btnExcluir'/>");

        $(".btnSalvar").bind("click", Salvar);
        $(".btnEditar").bind("click", Editar);
        $(".btnAdicionar").bind("click", Adicionar);
    }

    function Excluir() {
        var par = $(this).parent().parent();
        par.remove();
    }

    $(function () {
        $(".btnEditar").bind("click", Editar);
        $(".btnExcluir").bind("click", Excluir);
        $("#btnAdicionar").bind("click", Adicionar);
     
    }); 
    </script>
    }

 @section ActionSection{
    <input type="button" class="btn btn-primary" value="Salvar" onclick=" salvar();" />
    <input type="button" class="btn btn-default" value="Voltar" onclick="redirectTo('@Url.Action("Listar", "Funcionalidade")')"/>
    }
    @using (Html.BeginForm((Model != null && Model.Id > 0 ? "Editar" : "Salvar"), "Funcionalidade", FormMethod.Post, new { @class = "form-horizontal", @id = "formFuncionalidade", @enctype = "multipart/form-data" })) { 
    <fieldset>
    <div class="row">
    <div class="col-sm-8">
    <div style="text-align: left;">
           
                  
                  
        @Html.ValidationSummary(true)
       
       <div class="form-group">
            @Html.LabelFor(c => c.Id, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-2">
            @Html.TextBox("Id", "0", new { @id = "Id", @class = "form-control", @readonly = "readonly", @style = " margin-top: 8px;" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(c => c.Nome, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-6">
                @Html.TextBoxFor(c => c.Nome, new { @id = "nome", @maxlength = 50, @class = "form-control", @placeholder = "Nome", @style = " margin-top: 8px;" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(c => c.Caminho, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-6">
                @Html.TextBoxFor(c => c.Caminho, new { @id = "Caminho", @maxlength = 50, @class = "form-control",@placeholder = "Caminho", @style = " margin-top: 8px;" })
            </div>
        </div>
    </div>
    </div>
    </div>
    </fieldset>
        <div class="col-sm-6">
       
            <table id = "tbFuncionalidadeAcao" style = "width:100%" class="table table-striped table-bordered">
                <tr>
                    <td style="text-align:center;">Nome</td>
                    <td style="text-align:center;">Mnemonico</td>
                    <td style="text-align:center;">Ação</td>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="form-control date-picker" style="width:100%; text-align:center " name="dcMnemonico"      
                    </td>
                    <td>
                        <input type="text" class="form-control date-picker" style="width:100%; text-align:center " name="dcAcao"
                     </td>
                    <td class="col-action">
                    <img id = "btnAdicionar"class="img-icon" src="/CeoScrum/Content/css/icone/icon_add.png" title="Editar registro" width="20px" />
                    </td>
                </tr>      
           
            </table>
           

        </div>
    }

Answer 1

@Felipearaujo, this is what you wish to do?

var input = {
    Nome: $('[name="Nome"]'),
    Mnemonico: $('[name="Mnemonico"]'),
}

var documento = $(document);
var linhas = $("#tabela tbody");

documento.on("click", "[data-acao='adicionar']", function onAdicionarClick() {
    var item = {
        Nome: input.Nome.val(),
        Mnemonico: input.Mnemonico.val()
    };    
    
    if ($.trim(item.Nome) == "" || $.trim(item.Mnemonico) == "") {
        return;
    }
  
    var linha = $("<tr>");
    var nome = $("<td>").attr("data-column", "Nome");
    var mnemonico = $("<td>").attr("data-column", "Mnemonico");  
    var acoes = $("<td>").attr("data-column", "Acoes");
    var editar = $("<button>").attr("data-acao", "editar").html("Editar");
    var excluir = $("<button>").attr("data-acao", "excluir").html("Excluir");
  
    nome.html(item.Nome).data("value", item.Nome);
    mnemonico.html(item.Mnemonico).data("value", item.Mnemonico);
    acoes.append(editar).append(excluir);
    
    linha.append(nome);
    linha.append(mnemonico);
    linha.append(acoes);
  
    linhas.append(linha);
    return false;
});
                 
documento.on("click", "[data-acao='editar']", function onEditarClick() {
    var self = $(this);
    var linha = self.closest("tr");
    var nome = $("[data-column='Nome']", linha);
    var mnemonico = $("[data-column='Mnemonico']", linha);
    var acoes = $("[data-column='Acoes']", linha); 
    var cancelar = $("<button>").attr("data-acao", "cancelar").html("Cancelar");
    var confirmar = $("<button>").attr("data-acao", "confirmar").html("Confirmar");
  
    var input =  {
        Nome: $("<input>").attr("type", "text").val(nome.data("value")),
        Mnemonico: $("<input>").attr("type", "text").val(mnemonico.data("value")),
    }
    nome.empty().append(input.Nome);
    mnemonico.empty().append(input.Mnemonico);
    acoes.empty().append(cancelar).append(confirmar);
    return false;
});
  
documento.on("click", "[data-acao='excluir']", function onExcluirClick() {
    var self = $(this);
    var linha = self.closest("tr");
    linha.remove();
    return false;
});

documento.on("click", "[data-acao='cancelar']", function onEditarClick() {
    var self = $(this);
    var linha = self.closest("tr");
    var nome = $("[data-column='Nome']", linha);
    var mnemonico = $("[data-column='Mnemonico']", linha);
    var acoes = $("[data-column='Acoes']", linha);  
    var editar = $("<button>").attr("data-acao", "editar").html("Editar");
    var excluir = $("<button>").attr("data-acao", "excluir").html("Excluir");  
  
    nome.empty().html(nome.data("value"));
    mnemonico.empty().html(mnemonico.data("value"));
    acoes.empty().append(editar).append(excluir);
    return false;
});

documento.on("click", "[data-acao='confirmar']", function onEditarClick() {
    var self = $(this);
    var linha = self.closest("tr");
    var nome = $("[data-column='Nome']", linha);
    var mnemonico = $("[data-column='Mnemonico']", linha);
    var acoes = $("[data-column='Acoes']", linha);  
    var editar = $("<button>").attr("data-acao", "editar").html("Editar");
    var excluir = $("<button>").attr("data-acao", "excluir").html("Excluir");
  
    var input =  {
        Nome: $("input", nome),
        Mnemonico: $("input", mnemonico)
    };
  
    nome.data("value", input.Nome.val());
    mnemonico.data("value", input.Mnemonico.val());
  
    nome.empty().html(nome.data("value"));
    mnemonico.empty().html(mnemonico.data("value"));
    acoes.empty().append(editar).append(excluir);
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabela">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Mnemonico</th>
            <th>Ação</th>
        </tr>
        <tr>
            <th><input type="text" id="Nome" name="Nome" /></th>
            <th><input type="text" id="Mnemonico" name="Mnemonico" /></th>
            <th><button data-acao="adicionar">Adicionar</button></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 2

 @section HeadSection{
    <script type="text/javascript">
        var Nome = document.getElementById('Nome');
        var Mnemonico = document.getElementById('Mnemonico');
        var Acao = document.getElementById('Acao');
        var btnAdicionar = document.getElementById('btnAdicionar');
        var tbFuncionalidadeAcao = document.getElementById('tbFuncionalidadeAcao');

        adicionar.onclick = function adicionarClick() {
            var item = {
                Nome: Nome.value,
                Mnemonico: Mnemonico.value,
                Acao: Acao.value
            };
            if ((item.Nome == "") || (item.Mnemonico == "") || (item.Acao == "")) {
                return;
            }
            var texto = {
                Nome: document.createTextNode(item.Nome),
                Mnemonico: document.createTextNode(item.Mnemonico),
                Acao: document.createTextNode(item.Acao)
            }
            var elemento = {
                Linha: document.createElement("tr"),
                Nome: document.createElement("td"),
                Mnemonico: document.createElement("td"),
                Acao: document.createElement("td"),
            
            };
            elemento.Nome.appendChild(texto.Nome);
            elemento.Mnemonico.appendChild(texto.Mnemonico);
            elemento.Acao.appendChild(texto.Acao);

            elemento.Linha.appendChild(elemento.Nome);
            elemento.Linha.appendChild(elemento.Mnemonico);
            elemento.Acao.appendChild(elemento.Acao);

            tbFuncionalidadeAcao.appendChild(elemento.Linha);
            return false;
        }
    </script>

    @using (Html.BeginForm((Model != null && Model.Id > 0 ? "Editar" : "Salvar"), "Funcionalidade", FormMethod.Post, new { @class = "form-horizontal", @id = "formFuncionalidade", @enctype = "multipart/form-data" })) { 
    <fieldset>
    <div class="row">
    <div class="col-sm-8">
    <div style="text-align: left;">
           
                  
                  
        @Html.ValidationSummary(true)
       
       <div class="form-group">
            @Html.LabelFor(c => c.Id, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-2">
            @Html.TextBox("Id", "0", new { @id = "Id", @class = "form-control", @readonly = "readonly", @style = " margin-top: 8px;" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(c => c.Nome, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-6">
                @Html.TextBoxFor(c => c.Nome, new { @id = "nome", @maxlength = 50, @class = "form-control", @placeholder = "Nome", @style = " margin-top: 8px;" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(c => c.Caminho, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-6">
                @Html.TextBoxFor(c => c.Caminho, new { @id = "Caminho", @maxlength = 50, @class = "form-control",@placeholder = "Caminho", @style = " margin-top: 8px;" })
            </div>
        </div>
    </div>
    </div>
    </div>
    </fieldset>
        <div class="col-sm-6">
       
            <table id = "tbFuncionalidadeAcao" style = "width:100%" class="table table-striped table-bordered">
                <tr>
                    <td style="text-align:center;">Nome</td>
                    <td style="text-align:center;">Mnemonico</td>
                    <td style="text-align:center;">Ação</td>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="form-control date-picker" style="width:100%; text-align:center " name="dcMnemonico"      
                    </td>
                    <td>
                        <input type="text" class="form-control date-picker" style="width:100%; text-align:center " name="dcAcao"
                     </td>
                    <td class="col-action">
                    <img id = "btnAdicionar"class="img-icon" src="/CeoScrum/Content/css/icone/icon_editar.png" title="Editar registro" width="20px" />
                    </td>
                </tr>      
           
            </table>
           

        </div>