1

Tengo esta tabla de ejemplo hecha con material design lite. La última columna de la tabla tiene un botón BORRAR que al ser presionado debe mostrar un cuadro de diálogo donde se da la opción de borrar la fila seleccionada.

introducir la descripción de la imagen aquí

Ahora mismo éste es mi código. Al parecer está funcionando, sin embargo, estoy usando una variable global fila que no me gusta demasiado. ¿Qué recomendaciones me pueden dar para mejorar este código?

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
  </head>
  <body>

    <dialog class="mdl-dialog">
      <h4 class="mdl-dialog__title">Borrado filas</h4>
      <div class="mdl-dialog__content">
        <p>
          Desea eliminar la fila seleccionada?
        <p>
      </div>
      <div class="mdl-dialog__actions">
        <button type="button" class="mdl-button aceptar">Aceptar</button>
        <button type="button" class="mdl-button close">Cancelar</button>
      </div>
    </dialog>

    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">Material</th>
          <th>Cantidad</th>
          <th>Borrar</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
          <td>25</td>
          <td><button id="show-dialog" type="button" class="mdl-button borrar">Borrar</button></td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
          <td>50</td>
          <td><button id="show-dialog" type="button" class="mdl-button borrar">Borrar</button></td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
          <td>10</td>
          <td><button id="show-dialog" type="button" class="mdl-button borrar">Borrar</button></td>
        </tr>
      </tbody>
    </table>

    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
    <script>
      var dialog = document.querySelector('dialog');
      var showDialogButton = document.querySelector('#show-dialog');
      var fila; //variable global
      if (! dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
      }
      $('body').on('click', '.borrar', function(e) {
        fila = $(this).parent().parent();
        dialog.showModal();
      });
      dialog.querySelector('.close').addEventListener('click', function() {
        dialog.close();
      });
      dialog.querySelector('.aceptar').addEventListener('click', function() {
        fila.remove();
        dialog.close();
      });
    </script>

  </body>
</html>

2 respuestas 2

2

Si quieres evitar la variable global, una opción sería añadir una clase (o un atributo data-*) a la fila con la que estás operando. Entonces: si el usuario pulsa en "Cancelar", se quita la clase de la fila; o si el usuario pulsa en "Aceptar" se elimina el elemento que tenga esa clase.

Aunque no directamente relacionado con la variable global, otra cosa que cambiaría en el código es esto: $(this).parent().parent(). Eso funciona bien con la estructura actual, pero si cambias la estructura en el futuro, tendrás que cambiar esa línea también. En cambio si lo reemplazas con $(this).closest("tr"), ya no te tienes que preocupar de si el botón cambia su posición relativa dentro de la fila.

Así el código quedaría de este modo:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
  </head>
  <body>

    <dialog class="mdl-dialog">
      <h4 class="mdl-dialog__title">Borrado filas</h4>
      <div class="mdl-dialog__content">
        <p>
          Desea eliminar la fila seleccionada?
        <p>
      </div>
      <div class="mdl-dialog__actions">
        <button type="button" class="mdl-button aceptar">Aceptar</button>
        <button type="button" class="mdl-button close">Cancelar</button>
      </div>
    </dialog>

    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">Material</th>
          <th>Cantidad</th>
          <th>Borrar</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
          <td>25</td>
          <td><button id="show-dialog" type="button" class="mdl-button borrar">Borrar</button></td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
          <td>50</td>
          <td><button id="show-dialog" type="button" class="mdl-button borrar">Borrar</button></td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
          <td>10</td>
          <td><button id="show-dialog" type="button" class="mdl-button borrar">Borrar</button></td>
        </tr>
      </tbody>
    </table>

    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
    <script>
      var dialog = document.querySelector('dialog');
      var showDialogButton = document.querySelector('#show-dialog');
      if (! dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
      }
      $('body').on('click', '.borrar', function(e) {
        $(this).closest("tr").addClass("active-row");
        dialog.showModal();
      });
      dialog.querySelector('.close').addEventListener('click', function() {
        $("tr.active-row").removeClass("active-row");
        dialog.close();
      });
      dialog.querySelector('.aceptar').addEventListener('click', function() {
        $("tr.active-row").remove();
        dialog.close();
      });
    </script>

  </body>
</html>

2
  • Me gusta esta solución, evito usar la variable fila. el 9 feb. 2016 a las 19:16
  • Una solución limpia, que evita variables JavaScript innecesarias y aprovecha las características de HTML/CSS.
    – user227
    el 9 feb. 2016 a las 22:05
1

La primera solución para eliminar el uso de las variables globales es usar un IIFE, de esa forma todas las variables que declares son locales y no hay contaminación del global scope.

(function() {
  'use strict';

  var dialog = document.querySelector('dialog');
  var showDialogButton = document.querySelector('#show-dialog');
  var fila; //ya no es global sino una variable local limitada al ámbito del IIFE
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  $('body').on('click', '.borrar', function(e) {
    fila = $(this).parent().parent();
    dialog.showModal();
  });
  dialog.querySelector('.close').addEventListener('click', function() {
    dialog.close();
  });
  dialog.querySelector('.aceptar').addEventListener('click', function() {
    fila.remove();
    dialog.close();
  });

}());

El IIFE te lo puedes encontrar en estos dos formatos. Lo único que cambia es la posición de los paréntesis invocadores.

// Pasa jslint y jshint
(function() {

} ());

// No pasa jslint pero si jshint
(function() {

})();

La opción que te recomiendo y segunda variante es que envuelvas todo tu código en una función ready de jQuery ya que los IIFEs no son un remplazo para estos eventos. Estos de ejecutarán de manera inmediata y en tu código hay un script con atributo defer lo que significa que será ejecutado despues que el documento sea cargado lo que puede dejar tu función dialogPolyfill como undefined por ejemplo.

$(function() {
   'use strict';

   var dialog = document.querySelector('dialog');
   var showDialogButton = document.querySelector('#show-dialog');
   var fila; //ya no es global sino una variable local limitada al ámbito del la función anónima que le pasas a jQuery

   if (!dialog.showModal) {
       dialogPolyfill.registerDialog(dialog);
   }
   $('body').on('click', '.borrar', function(e) {
       fila = $(this).parent().parent();
       dialog.showModal();
   });
   dialog.querySelector('.close').addEventListener('click', function() {
       dialog.close();
   });
   dialog.querySelector('.aceptar').addEventListener('click', function() {
       fila.remove();
       dialog.close();
   });
 });  

Cualquiera de estos dos formatos es recomendado

$( document ).ready( handler )
$( handler )

Por último y como nota personal veo que en algunos lugares usas jQuery y en otras javascript puro para los selectores. Te recomiendo consistencia, si decides poner jQuery usa jQuery porque los navegadores tienen inconsistencias entre sí y jQuery se encarga de lidiar con estas en tu lugar, de otra forma te tocaría a ti lidiar con ellas para tener una experiencia uniforme. Este es un consejo a modo general, no necesariamente aplica a tu fragmento de código.

1
  • Si, tienes razón trataré de ser mas consistente. Gracias por la sugerencias. el 9 feb. 2016 a las 19:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.