Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Plugins para jQuery

http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

http://www.creativebloq.com/jquery/top-jquery-plugins-6133175

https://designmodo.com/jquery-ui-framework-plugins/

Ejercicio tablas completo


$(function () {
    function celdas(){
        $('td').mouseenter(function () {
            $(this).addClass("destacado");
        });
        $('td').mouseleave(function () {
            $(this).removeClass("destacado");
        });
    }
    $('#crear').click(function () {

        var tabla = "";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            tabla += "";
            for (var j = 0; j < columnas; j++) {
                tabla += "";
            }
            tabla += "";
        }

        tabla += "
#
";

        $('#resultado').html(tabla);
        celdas();

    });
    $('#crear2').click(function () {

        var tabla = "";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        var fila = "";
        for (var i = 0; i < columnas; i++) {
            fila += "";
        }
        for (var i = 0; i < filas; i++) {
            tabla += "" + fila + "";
        }
        tabla += "
#
";

        $('#resultado').html(tabla);
    });

    $('#crear3').click(function () {
        var tabla = "
";
        $('#resultado').html(tabla);
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            $('tbody').append("");
        }
        for (var i = 0; i < columnas; i++) {
            $('tr').append("#");
        }
    });
    
    $('#aumentar').click(function () {
        $('#fila_nueva').click();
        $('#col_nueva').click();
    });
    $('#fila_nueva').click(function () {
        var fila = $('tr').html();
        $('table').append("" + fila + "");
        celdas();
    });
    $('#col_nueva').click(function () {
        $('tr').append("#");
        celdas();
    });
    $('#rellenar').click(function () {
        $('td').text($('#contenido').val());
    });
    $('#numerar').click(function () {
        var cont = 1;
        $('td').each(function () {
            $(this).text(cont);
            cont++;
        });

    });
});

Quitar acentos

function omitirAcentos(text) {

      var acentos = "ÃÀÁÄÂÈÉËÊÌÍÏÎÒÓÖÔÙÚÜÛãàáäâèéëêìíïîòóöôùúüû";
      var original = "AAAAAEEEEIIIIOOOOUUUUaaaaaeeeeiiiioooouuuu";
      for (var i=0; i<acentos.length; i++) {
          text = text.replace(acentos.charAt(i), original.charAt(i));
      }
      return text;
}

Juego ahorcado

Vamos a crear un juego del ahorcado.

Tendremos un array con una serie de palabras.

La pantalla principal pondrá ‘Juego del ahorcado y un botón de jugar.

Al apretar jugar se seleccionará una palabra al azar y se dibujará como es habitual en el juego tantos guiones bajos como letras tenga la palabra.

Se crearán también una serie de botones con las letras del alfabeto.

Al pinchar en un botón se comprobará si la letra existe: si existe se dibuja en la palabra. Si no existe se aumenta el número de fallos. Si el número de fallos es siete se acaba el juego. Si la palabra está adivinada al completo el jugador gana. Al apretar un botón este queda desactivado.

Hay siete intentos.

Se adjuntan las imágenes.

¡Suerte!

Imágenes ahorcado

Crear filas y columnas en la tabla, modificar celdas

 $('#fila_nueva').click(function () {
        var fila = $('tr').html();
        $('table').append("<tr>" + fila + "</tr>");
        celdas();
    });
    $('#col_nueva').click(function () {
        $('tr').append("<td>#</td>");
        celdas();
    });
    $('#rellenar').click(function () {
        $('td').text($('#contenido').val());
    });
    $('#numerar').click(function () {
        var cont = 1;
        $('td').each(function () {
            $(this).text(cont);
            cont++;
        });

    });

Ejercicio crear tablas

Bucles anidados:

$('#crear').click(function () {

        var tabla = "<table  class='table table-bordered'>";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            tabla += "<tr>";
            for (var j = 0; j < columnas; j++) {
                tabla += "<td>#</td>";
            }
            tabla += "</tr>";
        }

        tabla += "</table>";

        $('#resultado').html(tabla);
    });

Bucles sucesivos:

 $('#crear2').click(function () {

        var tabla = "<table  class='table table-bordered'>";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        var fila = "";
        for (var i = 0; i < columnas; i++) {
            fila += "<td>#</td>";
        }
        for (var i = 0; i < filas; i++) {
            tabla += "<tr>"+fila+"</tr>";
        }
        tabla += "</table>";

        $('#resultado').html(tabla);
    });

Usando jquery:

    $('#crear3').click(function () {
        var tabla = "<table  class='table table-bordered'></table>";
        $('#resultado').html(tabla);
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            $('table').append("<tr></tr>");
        }
        for (var i = 0; i < columnas; i++) {
            $('tr').append("<td>#</td>");
        }
    });