Skip to main content
2 de 3
la pregunta pide revision de codigo
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

Borrar la fila seleccionada desde un dialogo de Material Design Lite

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

introducir la descripción de la imagen aquí

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

<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>
Javier Cárdenas
  • 2.7k
  • 4
  • 18
  • 41