1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Que un alert me indique que Fila elimine

Tema en 'Javascript' comenzado por rex, 21 de Julio de 2017.

  1. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Hola, me gustaría que mi programa le de un alert al usuario cuando elimine una fila dando un aviso que diga: "elimino la fila + numero de la fila ", espero que me entiendan, aun así les muestro mi código y espero que puedan ayudarme:

    Código (Text):
    <!Doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">

    <style>#content{position:absolute;min-height:50%;width:80%;top:20%;left:5%;}.selected{cursor:pointer;}.selected:hover{background-color:#EBF5FB;}.seleccionada{background-color:#0585C0;}</style>
    <script>
    $(document).ready(function() {

        $('#bt_add').click(function() {
              var check = [];
              $("#tabla").find('.selected').find('td').each(function(){
                if($.trim($(this).text()) === "")
                  check.push($(this).attr('id'));
              });
              if(check.length === 0)
                agregar();
              else
                alert('Registre los Datos de la Fila ');;
          });
          $('#bt_del').click(function() {
            eliminar();
          });

          $('#bt_delall').click(function() {
            eliminarTodasFilas();

          });

        });
        var cont = 0;
        var id_fila_selected = [];

        function agregar() {
          cont++;
          var fila =

            '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td> </td>' +

            '<td><input type="text" id="nombre"></td>' +

            '<td><input type="text" id="area"></td>' +

            '<td><input type="text" id="puesto"></td>' +

            '<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>';

          $('#tabla').append(fila);
          reordenar();
        }

        function addToTable(e) {
          if (e.keyCode === 13) {
            e.preventDefault();
            const row = e.target.parentNode.parentNode;
            const inputs = row.querySelectorAll('input');
            const values = [].map.call(inputs, input => input.value);
            const tds = row.querySelectorAll('td');
            [].forEach.call(tds, (td, i) => {
              if (i === 0) { td.textContent = i + 1; }
              else { td.innerHTML = values[i - 1]; }
            });
            reordenar()
          }
        }

        function seleccionar(id_fila) {
          if ($('#' + id_fila).hasClass('seleccionada')) {
            $('#' + id_fila).removeClass('seleccionada');
            // borrar también el id del array de filas seleccionadas
            var existe_el_id = id_fila_selected.indexOf(id_fila);
            id_fila_selected.splice(existe_el_id, 1);
          } else {
            $('#' + id_fila).addClass('seleccionada');
            // agregar id sólo si se hizo click
            id_fila_selected.push(id_fila);
          }

        }

        function eliminar() {

          for (var i = 0; i < id_fila_selected.length; i++) {
            $('#' + id_fila_selected[i]).remove();
          }
          reordenar();
        }

        function reordenar() {
          var num = 1;
          $('#tabla tbody tr').each(function() {
            $(this).find('td').eq(0).text(num);
            num++;
          });
        }

        function eliminarTodasFilas() {
          $('#tabla tr.selected').each(function() {
            $(this).remove();
          });
        }

        $(function () {      
              $("table").on("dblclick", "td",function () {                
                  var OriginalContent = $(this).text();
                  $(this).addClass("cellEditing");
                  $(this).html("<input type='text' value='" + OriginalContent + "' >");
                  $(this).children().first().focus();
                  $(this).children().first().keypress(function (e) {
                      if (e.which == 13) {
                          var newContent = $(this).val();
                          $(this).parent().text(newContent);
                          $(this).parent().removeClass("cellEditing");
                          }
                      });
                  $(this).children().first().blur(function(){
                      $(this).parent().text(OriginalContent);
                      $(this).parent().removeClass("cellEditing");
                      });
                  });
              });
        </script>

    </head>
    <body>

    <div id="content">
      <label> Tabla de Ejemplo </label>
      <br>
      <div align="center" style="width:416px;">
                <button id="bt_add" class="btn btn-primary">Agregar</button>
                <button id="bt_del" class="btn btn-primary">Eliminar</button>
                <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
                 </div>
                <table id="tabla" style="position:absolute;top:150px;left:75px" class="table table-bordered">

                <thead>

        <thead>
          <tr>
            <td>Nº</td>
            <td>NOMBRE</td>
            <td>AREA</td>
            <td>PUESTO</td>
            <td>EMAIL</td>
          </tr>
        </thead>
      </table>
    </div>

    </body>
    </html>
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.462
    Me gusta recibidos:
    673
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A rex le gusta esto.
  3. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Hola, me ayudo mucho tu código, pero hay un problema que he tratado de soluciona: no vacía los array, he tratado de localizar en que parte los puedo borrar, pero por mas que he buscado en todo el código no localizo como hacer tal función, comprendo que esto se ubica desde el *id_fila_selected* pero no se que modificar.

    Enserio si pudieras ayudarme en ese problema te lo agradecería de antemano.
     
  4. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.462
    Me gusta recibidos:
    673
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    nose a que te refieres, para que quieres hacer eso? que problema hay o que?
     
  5. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Hola, te diré un ejemplo mi problema es el siguiente:

    Tengo dos filas en mi tabla y al eliminar la primera me sale el mensaje "Eliminaste la fila 1" pero cuando quiero eliminar la segunda fila me sale el mismo mesaje: "eliminaste la fila 1" y luego me sale otro mensaje: "eliminaste la fila 2".
     
  6. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    659
    Me gusta recibidos:
    502
    Puntos de trofeos:
    93
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Comparte el code que tienes hasta el momento para que los compañeros te puedan brindar la solución alternativa
     
    A rex le gusta esto.
  7. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Hola Dawud es este:

    Código (Text):
    <!Doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">
       
       
       
    <style>
        #content{
            position: absolute;
            min-height: 50%;
            width: 80%;
            top: 20%;
            left: 5%;
        }

        .selected{
            cursor: pointer;
        }
        .selected:hover{
            background-color: #EBF5FB;
           
        }
        .seleccionada{
            background-color: #81D4FA;
           
        }
       
        table thead {


    }
       
    </style>
    <script>
    $(document).ready(function() {
       
        $('#bt_add').click(function() {
               
            var check = [];                
              $("#tabla").find('.selected').find('td').each(function(){
                if($.trim($(this).text()) === "")
                  check.push($(this).attr('id'));
             ;
              });
           
                      if(check.length === 0)
                       
                          agregar();
              else
                alert('No puedo agregar mas de una fila, por favor llene los campos');;
               
          });
           
          $('#bt_del').click(function() {

              eliminar();
           
               
            });
               
          $('#bt_delall').click(function() {
            eliminarTodasFilas();
            alert('Elimino todas las filas');
          });
          reordenar();

        });
        var cont = 0;
        var id_fila_selected = [];
       
        function agregar() {
          cont++;
          var fila =
           
            '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td></td>' +

            '<td><input type="text" id="nombre"></td>' +

            '<td><input type="text" id="area"></td>' +

            '<td><input type="text" id="puesto"></td>' +

            '<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>';


          $('#tabla').append(fila);
          reordenar();
         
        }

       
        function addToTable(e) {
           
          if (e.keyCode === 13) {
            e.preventDefault();
            if($("#nombre").val() == ""){
                    alert("Ingrese el nombre del usuario");
                  return false;
                }else if($("#area").val() == ""){
                       alert("Ingrese el nombre de la area");
                      return false;
                }else if($("#puesto").val() == ""){
                       alert("Ingrese el nombre del puesto");
                      return false;
                }else if($("#email").val() == ""){
                       alert("Ingrese su correo electronico");
                      return false;
                }
            const row = e.target.parentNode.parentNode;
            const inputs = row.querySelectorAll('input');
            const values = [].map.call(inputs, input => input.value);
            const tds = row.querySelectorAll('td');
            [].forEach.call(tds, (td, i) => {
             if (i === 0) { td.textContent = i + 1; }
              else { td.innerHTML = values[i - 1]; }
           
            });
           
            reordenar();
           
          }
        }

        function seleccionar(id_fila) {
          if ($('#' + id_fila).hasClass('seleccionada')) {
            $('#' + id_fila).removeClass('seleccionada');
         
            var existe_el_id = id_fila_selected.indexOf(id_fila);
            id_fila_selected.splice(existe_el_id, 1);
          } else {
            $('#' + id_fila).addClass('seleccionada');
         
            id_fila_selected.push(id_fila);
          }
       
        }
       
         function eliminar() {
             for (var i = 0; i < id_fila_selected.length; i++) {
                 alert('elimino la ' +  id_fila_selected[i]);
                 $('#' + id_fila_selected[i]).remove();
               
             }
           
             reordenar();
       
        id_fila_selected=[];
                     
         }
       

        function reordenar() {
          var num = 1;
          $('#tabla tbody tr').each(function() {
            $(this).find('td').eq(0).text(num);
            num++;
          });
        }

        function eliminarTodasFilas() {
          $('#tabla tr.selected').each(function() {
            $(this).remove();
          });
        }
       
        $(function () {    
           
              $("table").on("dblclick", "td",function () {                  
                  var OriginalContent = $(this).text();
                 
                  $(this).addClass("cellEditing");
                  $(this).html("<input type='text' value='" + OriginalContent + "' />");
                  $(this).children().first().focus();
                  $(this).children().first().keypress(function (e) {
                      if (e.which == 13) {
                          var newContent = $(this).val();
                          $(this).parent().text(newContent);
                          $(this).parent().removeClass("cellEditing");
                       
                      }
                   
                      });
                  $(this).children().first().blur(function(){
                      $(this).parent().text(OriginalContent);
                      $(this).parent().removeClass("cellEditing");
                   
                      });
                 
                  });
             
              });
       
       
        </script>
       
    </head>
    <body>
       
    <div id="content">
      <h1> Tabla de Ejemplo </h1>
      <br>
      <div align="center" style="width:416px;" >
                <button id="bt_add" class="btn btn-primary">Agregar</button>
                <button id="bt_del" class="btn btn-primary">Eliminar</button>
                <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
                 </div>
                <table id="tabla" style= "position:absolute;top:150px;left:75px" class="table table-bordered">
                 
        <thead>
          <tr>
            <th>Nº</th>
            <th>NOMBRE</th>
            <th>AREA</th>
            <th>PUESTO</th>
            <th>EMAIL</th>
          </tr>
        </thead>
      </table>
    </div>

    </body>
    </html>
    Como te vuelvo a comentar: En mi tabla Solo ingreso dos filas, cuando elimino por ejemplo la primera fila me sale el mensaje: "eliminaste la fila 1", nuevamente quiero borrar la única fila que me queda me sale me sale este mensaje: "eliminaste la fila 2", pero realmente es la fila numero 1...
     

Comparte esta página