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

Nuevamente necesito de su Ayuda...

Tema en 'Javascript' comenzado por rex, 24 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
    Anteriormente, publique mi código:

    Código (Javascript):
    <!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 {
      color: #fff;
      background-color: #039BE5;
    }
       
    </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></th>
            <th>NOMBRE</th>
            <th>AREA</th>
            <th>PUESTO</th>
            <th>EMAIL</th>
          </tr>
        </thead>
      </table>
    </div>

    </body>
     
    E incluso describí mi problema, me ayudaron y creí que ya estaba resuelto pues mi programa ingresa, modifica y elimina filas de una tabla.
    Pero ahora, lo que quiero es que mi tabla me de un "Alert" diciéndome que fila elimine, aquí comienza el verdadero problema:
    Digamos que ingrese dos filas dentro de mi tabla, borro la primera fila y me sale el mensaje: "Elimino la fila 1", luego ingreso una nueva primera fila y al volverla a eliminar me sale el mensaje: "Elimino la fila 2", cuando realmente estoy eliminando la fila 1 o cuando quiero eliminar la fila 2 o la segunda fila me sale el mensaje: "Elimino la fila 3".
    No se a que se deba, por favor ayúdenme, que se me ha complicado esto...
     
  2. 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
    Hola que tal :):)... El problemas que tienes o_O es debido a la variable array id_fila_selected en donde:

    Si observas en tu frgamento de JS cuando se hace referencia la función seleccionar pasas el valor id, :eek::eek: osea el nombre de cada id de cada fila existente... pero recuerda que tienes un contador que va incrementando cada id fila en el cual ese contador si tu ingresas 10 filas tendrá [fila1, fila2, fila3 ... fila10 ] y el valor id recuperado al hacer click en la fila lo almacenas en la variable array antes mencionadas.

    Código (Javascript):
     function seleccionar(id_fila) {
          if ($('#' + id_fila).hasClass('seleccionada')) {
          } else {
             $('#' + id_fila).addClass('seleccionada');  
    [SIZE=5][B][COLOR=#ff0000]        id_fila_selected.[/COLOR][COLOR=#000000]push([/COLOR][COLOR=#ff0000]id_fila[/COLOR][COLOR=#000000])[/COLOR][COLOR=#ff0000];[/COLOR][/B][/SIZE]
          }
        }
    Quedando de la siguiente forma, si notas en la consola imprimo el id de la fila seleccionada seleccionada en el cual la variable array tiene un nuevo elemento agregado fila4 posición cero...
    errorDelTable.jpg
    Y en la function eliminar muestra el nombre de la fila... ya que si elimino la fila anterior seleccionada me mostrará el mensaje elimino la fila4
    y para evitar eso no debes de imprimir el valor valor del array...

    Para solucionar tu problema tiene que recuperar el el valor o valores del primer elemento <tr> de cada fila existente osea los N° ordenados... como puedes observar en la imagen siguiente Imprimo un mensaje de alerta global en donde muestra las filas que fuerons eliminadas (en este caso 3, 5 y 7) en donde recupero los datos N° por medio de getElementById( filaselccionada ).firstElementChild.textContent. y lo almaceno en una variable string (concatenando con el siguiente operador += ). dentro del ciclo for.. las condición para mostrar el mensaje lo coloque afuera del ciclo for...

    errorDelTable3.jpg


    Y listo tienes funcionando los datos de eliminar correctament
     
    A AngelKrak 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 Dawud, entonces el codigo Java Script que me pusiste:

    Código (Javascript):
    function seleccionar(id_fila) {
          if ($('#' + id_fila).hasClass('seleccionada')) {
          } else {
             $('#' + id_fila).addClass('seleccionada');
    [SIZE=5][B][COLOR=#ff0000]        id_fila_selected.[/COLOR][COLOR=#000000]push([/COLOR][COLOR=#ff0000]id_fila[/COLOR][COLOR=#000000])[/COLOR][COLOR=#ff0000];[/COLOR][/B][/SIZE]
          }
        }
    Lo reemplazo por el que tengo, que seria este?:

    Código (Javascript):
      function seleccionar(id_fila) {
          if ($('#' + id_fila).hasClass('seleccionada')) {
            $('#' + id_fila).removeClass('seleccionada');
    .
    .
    .

    Porque la verdad no le entendí muy bien.
     
    Última modificación: 24 de Julio de 2017
  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:
    yo te recomendaria que usaras mejor data-id="" de html5 y puedas eliminar mejor el que es ;) y que te muestre el mensaje bien ;)
     
  5. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Y el:
    Código (Javascript):
     getElementById( filaselccionada ).firstElementChild.textContent.
    Va también dentro de mi código.
     
  6. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    La verdad no les entiendo muy bien.... me estoy haciendo bolas....
    Ya inserte
    Código (Javascript):
    getElementById( filaselccionada ).firstElementChild.textContent;        
    dentro del for y no me funciona...
     
  7. 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
    No no noo_Oo_O.... Analiza lo que te mencione... No tienes que reemplazar nada de la función seleccionar...
    Solo hice referencia ala función... cuando seleccionas una fila de la tabla se almacena en la variable id_fila_selected el cual esa variable es un array... si observas en la parte del mensaje anterior te mencione en la imagen #2 cual fue tu error de que porque te muestra un mensaje que la fila eliminada no es la correcta, el cual es debido que en el array id_fila_selected guardar los nombre de los id seleccionado con push() quedando de esta forma de acuerdo a la vista de la imagen #2 ["fila4"]...

    Entonces para poder corregir esa parte que no muestre un alerta que se ha eliminado la fila10 cuando en realizada se elimino la fila 3

    Te mencione la posible solución..

    La siguiente linea si va dentro de tu code ya que te permitirá recopilar el valor de la columna fila seleccionada

    En otras palabras tu usas jQuery y el anterior es escrito solo con javascript native, Podrías utilizar de las formas sigueintes

    Código (Javascript):
    // JAVASCRIPT
    document.getElementById(id_fila_selected[i]).firstElementChild.textContent;

    //jQuery
    $('#' + id_fila_selected[i]).first().text();
     
    Última modificación: 24 de Julio de 2017
  8. 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
    En mi parecer no es necesario aplicar un atributo data-id... ya que con solo hacer referencia con el id puedes eliminar la fila seleccionada
     
  9. 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
    Esa parte va dentro del ciclo for, pero por lo que veo que describe no tienes aprendizaje en JAVASCRIPT native, ya que sin embargo no agregue la palabra document antes del getElementById( ), me fue con la idea que tenías conocimiento de JS puro (lo básico) pero ya te lo mencione en el mensaje anterior. Y si te confirmo de nuevo va dentro del ciclo for (esto es para que te pueda recuperar del primer elemento tr de la columna N°)

    Para evitar mas que te confunda... te dejo la imagen previa del cambio que tenías que realizar

    upload_2017-7-24_16-44-10.png

    Nota: te sugiero que aprendas mejor Javascript solo, como funciona, como se estructura, como se aplica, como se escribe , no utilices jQuery por el momento u otro framework o librería en particular...
     
    A rex y AngelKrak les gusta esto.
  10. 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:
    pero el ID es mas usado para cosas importantes, si te fijas en mi CMS Muneto tengo los data-id="" para eliminar exactamente el elemento que quiero y no aya problemas ;)
     
  11. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Dawud, A parte de Falcom Master, que otras paginas y/o libros me ayudaría a aprender Javascript??
     
  12. 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
    Como sería utilizar el ID para usted??
    En donde podría utilizar los atributos ID para algo importante??
    Como sabría en que momento utilizar un id importante??

    En este caso el compañero solo agrega el id a cada fila pero no maneja otra forma de manipular ese id sino solo recupera y lo almacena en una variable array

    Pos lo tendré que hechar un vistazo ya que no he visto esa parte... Sin embargo puede ser funcional utilzar un data-id, o haciendo referencia por medio del id puedes eliminar ya que es un único valor.. ha diversas forma de eliminar un fila... cuando elimino una fila lo almaceno en un array como el compañero pero en ves de guardar solo el nombre de la id (fila1,fila2... etc) almaceno el elemento removido... o sea <tr> los <td> contenido </tr> y lo elimino de la siguiente manera ... tomando el ejemplo del compañero

    Código (Text):
    var myTabla= document.getElementById("tabla");
    myTabla.removeChild(id_fila_selected[i]);
     
    A AngelKrak le gusta esto.
  13. 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
    Te recomiendo que visites la w3school tiene una guía muy buena para que conozca que elementos existe, creo que con solo ese sitio podrás aprender muchas..
     
    A AngelKrak y rex les gusta esto.

Comparte esta página