entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Que un alert me indique que Fila elimine

Hola, Soy nuevo en esto de programar, y me gustaría que me ayudaran con mi problema,tengo un programa que genera, elimina y agrega filas dentro de una tabla, pero lo que quiero hacer es que cuando el usuario elimine una fila me de un aviso (alert) 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:

<!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>

1voto

rojo comentado

Por favor, ¿alguien que me pueda ayudar?

2 Respuestas

1voto

cobasESP Puntos19650

Cuando seleccionas las filas, crea una array global accesible desde fuera de cada funcion, y usalo de auxiliar, alli meterás todos los ids de las filas que selecciones, y cuando se deselecciones todo, limpias el array, asi conseguimos tener un array con las filas seleccionadas y cuando hagas alguna modificación/eliminación, sabes en todo momento que filas están siendo afectadas y puedes recorrerlas con un bucle for y mostrar un alert() para cada una de ellas, o crear una sola cadena de texto que pongo "has eliminado 1,2,3,4 filas" y mostrarlo en un solo alert.

Pero para ello necesitas ese array que te guarde las filas que selecciones y que sea limpiado cada vez que realizad una acción o deselecciones algo

1voto

pedrourday Puntos3330

Una solución mucho más fácil es usar input[type="checkbox"] que tengan como valor el correspondiente id y ocultarlos con CSS. De esa manera es más fácil saber cuales están seleccionados. En JQuery se hace usando prop("checked"). Y ten cuidado con CSS; no uses display:none porque puede que no funcione en algunos navegadores, usa visibility:hidden y position:absolute. No entiendo porqué, pues debería funcionar, pero ese es otro tema.

Espero que te haya ayudado. Saludos!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta