none
Eliminar rows de tabla RRS feed

  • Pregunta

  • Hola tengo en mi proyecto una pagina donde debo guardar varios datos a la vez o sea una lista. Para esto cree una tabla con textBox dentro de cada celda, agrego los datos y presiono guardar, a la vez tengo un link tipo boton que cada vez que presiono me agrega otra fila(row),hasta ahi bien, para eso me valgo de un script(javascript). El problema que tengo es para eliminar filas, no he podido resolver este tema y es por eso que pido ayuda, por si alguien me puede tender la mano.

    Este es mi codigo en mi Vista. Y estoy desarrollando con Asp Net Mvc

    Vista-CodigoRazor

    @model List<Intermec.ViewModels.DespachoViewModels>

    <fieldset class="col-md-12" style="border:1px ridge #C5C2C2;margin-bottom:10px;">
        <legend>Ingresar Guía de Despacho</legend>
        <div class="col-md-12">
            @using (Html.BeginForm("OrdenesdeDespacho", "Informes", FormMethod.Post))
            {
                @Html.AntiForgeryToken()
                <div class="form-inline" style="margin-bottom:10px;">
                    <div class="form-group">
                        <input type="text" class="form-control input-sm" placeholder="Ingrese orden de despacho" name="guiadespacho" id="guiadespacho" value="" required="required">
                        <input type="text" class="form-control input-sm datepicker" name="fecha" id="fecha" value="@DateTime.Now.Date.ToString("yyyy/MM/dd")" required="required">
                        @(Html.Kendo().AutoComplete()
                .Name("cliente")
                .DataTextField("ClienteServicioTecnico")
                .Filter("contains")
                .MinLength(2)
                .Placeholder("Seleccione Cliente")
                .HtmlAttributes(new { @class = "form-control input-sm", style = "width:190px", required = "required" })
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetEmpresas", "ClientesServicio")
                            .Data("onAdditionalData");
                    })
                    .ServerFiltering(false);
                })
                        )
                    </div><!-- /input-group -->
                </div>
                <div class="col-md-8">
                    <table id="dataTable" class="table table-striped">//Tabla de formulario
                        <tr>
                            <td>N°Informe</td>
                            <td>Observaciones</td>
                            <td><a href="#Agregar" id="addNew" class="create btn btn-success btn-xs"><span class='glyphicon glyphicon-plus'></span></a></td>//Aqui esta el boton para agregar fila
                        </tr>
                        @if (Model != null && Model.Count > 0)
                    {
                        int j = 0;
                        foreach (var i in Model)
                        {
                                <tr>
                                    <td>@Html.TextBoxFor(a => a[j].InformeId, new { @class = "form-control input-sm", required = "required", title = "Se requiere informe" })</td>
                                    <td>@Html.TextBoxFor(a => a[j].Observaciones, new { @class = "form-control input-sm" })</td>
                                    <td><td><input type="button"class="delete"  value="Eliminar" /></td></td>//Este es el boton para eliminar
                                </tr>
                                j++;
                            }
                        }
                    </table>
                    <input type="submit" value="Registrar Ordenes" style="margin-bottom:10px;" class="btn btn-success btn-sm" />
                    <a href="/Informes/OrdenesdeDespacho" class="btn btn-danger btn-sm"style="margin-bottom:10px;">Limpiar</a>
                    @if (ViewBag.Imprimir!=null)
                    {
                        <a href="/Informes/ImprimirDespachos/impresion?=@ViewBag.Imprimir" class="btn btn-warning btn-sm"style="margin-bottom:10px;">Imprimir</a>
                    }
                </div>
            }
           
        </div>
    </fieldset>

    Y estos son mis scripts para agregar y eliminar

    <script language="javascript">//Agregar
            $(document).ready(function () {
                //1. Add new row
                $("#addNew").click(function (e) {
                    e.preventDefault();
                    var $tableBody = $("#dataTable");
                    var $trLast = $tableBody.find("tr:last");
                    var $trNew = $trLast.clone();
                    var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                    $trNew.find("td:last").html('<input type="button" class="delete" value="tt"/>');
                    $.each($trNew.find(':input'), function (i, val) {
                        // Replaced Name
                        var oldN = $(this).attr('name');
                        var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                        $(this).attr('name', newN);
                    });
                    $trLast.after($trNew);
                });
            });
    </script>

    //Eliminar

    <script type="text/javascript">
        $(document).ready(function () {
            $(".delete").on("click", function () {
                var tr = $(this).closest('tr');
                tr.remove();
            });
        });
    </script>

    Con este codigo me deja eliminar, pero si presiono el link para agregar filas no hace nada , pero si cambio

    <td><td><input type="button"class="delete"  value="Eliminar" /></td></td>

    Por

    <td><a href="#"  class="delete btn btn-danger btn-xs"><span class='glyphicon glyphicon-trash'></span></a></td>

    Me deja agregar pero si presiono el link para eliminar no hace nada

    Cualquier ayuda se agradece

     


    Juan Lobos


    • Editado jhon1121 viernes, 11 de septiembre de 2015 21:06
    viernes, 11 de septiembre de 2015 21:05

Respuestas

  • Hola perdona la demora por no responder. Te cuento que gracias a Dios pude resolver el tema.Aqui esta el codigo.Esto lo que hace es agregar una fila a la tabla y se crea un enlace para eliminar siempre la ultima fila de la tabla, que es lo que necesito.

    <table id="dataTable" class="table table-striped">//Tabla de formulario
                        <tr>
                            <td>N°Informe</td>
                            <td>Observaciones</td>
                            <td><a href="#Agregar" id="addNew" class="create btn btn-success btn-xs"onclick="myFunction()"><span class='glyphicon glyphicon-plus'></span></a></td>//Aqui esta el boton para agregar fila
                        </tr>
                        @if (Model != null && Model.Count > 0)
                    {
                        int j = 0;
                        foreach (var i in Model)
                        {
                                <tr>
                                    <td>@Html.TextBoxFor(a => a[j].InformeId, new { @class = "form-control input-sm", required = "required", title = "Se requiere informe" })</td>
                                    <td>@Html.TextBoxFor(a => a[j].Observaciones, new { @class = "form-control input-sm" })</td>
                                    <td><td><a onclick='removeRow(this)' class="btn btn-warning btn-xs"><span class='glyphicon glyphicon-trash'></span></a></td></td>//Este es el enlace para eliminar la ultima fila
                                </tr>
                                j++;
                            }
                        }
                    </table>

    //Scripts tanto para agregar y eliminar, aparte hay un fragmento en cada script que sirve para contar y mostrar las filas del total de la tabla

    <script language="javascript">
        $(document).ready(function () {

            //1. Add new row
            $("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#dataTable");
                var $trLast = $tableBody.find("tr:last");
                var $trNew = $trLast.clone();

                var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                $.each($trNew.find(':input'), function (i, val) {
                    // Replaced Name
                    var oldN = $(this).attr('name');
                    var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                    $(this).attr('name', newN);

                });
                $trLast.after($trNew);

            });

        });
    </script>
    //Para eliminar y contar las filas de la tabla las mostrara en cualquier elemento que tenga la id"demo"
    <script>
        function removeRow(selector) {
            $('#dataTable').each(function () {
                if ($('#dataTable', this).length > 0) {
                    $('#dataTable tr:last', this).remove();
                } else {
                    $('tr:last', this).remove();
                }
                var x = document.getElementById("dataTable").rows.length;
                var y = x - 1;
                document.getElementById("demo").innerHTML = "Contador: " + y + " filas(rows añadidas).";
            });
        }
    </script>
    //Script para contar las filas de la tabla al añadir mas filas y las muestra en el elemento id"demo"
    <script>
        function myFunction() {
            var x = document.getElementById("dataTable").rows.length;
            var y = x;
        document.getElementById("demo").innerHTML = "Contador: " + y + " filas(rows añadidas).";
    }
    </script>


    Juan Lobos

    • Marcado como respuesta jhon1121 domingo, 20 de septiembre de 2015 18:32
    domingo, 20 de septiembre de 2015 18:32

Todas las respuestas

  • Hola,

     El código está un poco complicado de seguir para mí, pero te puedo ayudar a simplificarlo, tal vez sea más simple encontrar el problema.

    Primero, agregar una fila. Simplemente creando el HTML a mano e insertando al final de la tabla es suficiente y más sencillo.

    Algo así:

    $("#add").on("click", function(){
     var f = "<tr><td><span>hola</span><a href='JavaScript:void(0);'>Quitar</a></td></tr>";
     $("table").append(f);
    });
    


    Y para quitar es sencillo también

    $(document).on("click", "a", function(){
      this.parentNode.remove()
    });

    Tal vez lo que pasa sea que cuando asociás el evento click al elemento "a" este no exista (porque se crea de forma dinámica) pero como dije al principio me confunde un poco el código.

    Dejo un link a un gist  con un ejemplo funcionado:

    https://gist.github.com/leomicheloni/a2b85f0ce3bb426dde30#file-agregarquitar

    También un post explicando el tema de los elementos dinámicos

    http://www.leomicheloni.com/post/2013/07/01/jQuery-Reemplazar-e2809clivee2809d-por-e2809cone2809d.aspx

    Saludos!

    martes, 15 de septiembre de 2015 0:20
  • Hola perdona la demora por no responder. Te cuento que gracias a Dios pude resolver el tema.Aqui esta el codigo.Esto lo que hace es agregar una fila a la tabla y se crea un enlace para eliminar siempre la ultima fila de la tabla, que es lo que necesito.

    <table id="dataTable" class="table table-striped">//Tabla de formulario
                        <tr>
                            <td>N°Informe</td>
                            <td>Observaciones</td>
                            <td><a href="#Agregar" id="addNew" class="create btn btn-success btn-xs"onclick="myFunction()"><span class='glyphicon glyphicon-plus'></span></a></td>//Aqui esta el boton para agregar fila
                        </tr>
                        @if (Model != null && Model.Count > 0)
                    {
                        int j = 0;
                        foreach (var i in Model)
                        {
                                <tr>
                                    <td>@Html.TextBoxFor(a => a[j].InformeId, new { @class = "form-control input-sm", required = "required", title = "Se requiere informe" })</td>
                                    <td>@Html.TextBoxFor(a => a[j].Observaciones, new { @class = "form-control input-sm" })</td>
                                    <td><td><a onclick='removeRow(this)' class="btn btn-warning btn-xs"><span class='glyphicon glyphicon-trash'></span></a></td></td>//Este es el enlace para eliminar la ultima fila
                                </tr>
                                j++;
                            }
                        }
                    </table>

    //Scripts tanto para agregar y eliminar, aparte hay un fragmento en cada script que sirve para contar y mostrar las filas del total de la tabla

    <script language="javascript">
        $(document).ready(function () {

            //1. Add new row
            $("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#dataTable");
                var $trLast = $tableBody.find("tr:last");
                var $trNew = $trLast.clone();

                var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                $.each($trNew.find(':input'), function (i, val) {
                    // Replaced Name
                    var oldN = $(this).attr('name');
                    var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                    $(this).attr('name', newN);

                });
                $trLast.after($trNew);

            });

        });
    </script>
    //Para eliminar y contar las filas de la tabla las mostrara en cualquier elemento que tenga la id"demo"
    <script>
        function removeRow(selector) {
            $('#dataTable').each(function () {
                if ($('#dataTable', this).length > 0) {
                    $('#dataTable tr:last', this).remove();
                } else {
                    $('tr:last', this).remove();
                }
                var x = document.getElementById("dataTable").rows.length;
                var y = x - 1;
                document.getElementById("demo").innerHTML = "Contador: " + y + " filas(rows añadidas).";
            });
        }
    </script>
    //Script para contar las filas de la tabla al añadir mas filas y las muestra en el elemento id"demo"
    <script>
        function myFunction() {
            var x = document.getElementById("dataTable").rows.length;
            var y = x;
        document.getElementById("demo").innerHTML = "Contador: " + y + " filas(rows añadidas).";
    }
    </script>


    Juan Lobos

    • Marcado como respuesta jhon1121 domingo, 20 de septiembre de 2015 18:32
    domingo, 20 de septiembre de 2015 18:32