jeudi 30 juin 2016

How to create a table using user input with Javascript/JQuery


I'm trying to create a table using a user input prompt which is saved into a variable. I want to be able to take that variable and make it an even number of rows and columns. So for example if the user input is 5, I want to make a 5x5 table.

I'm able to take the user's input and make the correct amount of rows, but I'm having trouble with the columns.

Could anyone offer some insight on my code? My js fiddle is below:

$(document).ready(function() {
    //cache all jquery objects in variables
    var $button = $('.button');
    var $wrapper = $('.wrapper');
    var $bones = $('.bones');
    var $rows = $('.rows');

    $button.click(function() {

        //prompt user for input on table size
        var inp = prompt("Enter a number");

        for (var i = 0; i < inp; i++) {
            $bones.append("<tr class='rows'></tr>");
            $rows.append("<td class='block'></td>");
        };
    });

});

https://jsfiddle.net/81zv9zjs/


Aucun commentaire:

Enregistrer un commentaire