Question

This code works fine to create a grid of divs:

for (var i = 0; i < 10; i++) { // rows
    for (var j = 0; j < 6; j++) { // columns
        var id = String.fromCharCode(65 + j) + i; // e.g., B1
        $('<div></div>').data('accepts', id).appendTo("#cardSlots").droppable({
            accept: '#cardPile div',
            hoverClass: 'hovered',
            drop: handleCardDrop
        }); 
    }
$("cardSlots").append("<br />");
}

…but when I resize the window, the divs sometimes slip on to the next line. I want a table with a fixed 6×10 size, but when I try to build a table instead of divs, I break the “droppable” property.

How can I rewrite the code above so that it creates a 6×10 html table where each cell is droppable?

Answer 1

OK, there were two things I needed to learn to do this right. The first is that appendTo is smart enough to know to put td inside tr, so this line is what allows me to create table rows on the fly:

$('<tr></tr>').appendTo("#grid");

The second is that I can identify the last (i.e., the most recently written) table row as follows:

appendTo("#grid tr:last")

So the end result (and it works perfectly, thanks Mike!) is this:

for (var i = 0; i < 10; i++) { // rows
    $('<tr></tr>').appendTo("#grid");
    for (var j = 0; j < 6; j++) { // columns
        var id = String.fromCharCode(65 + j) + i; // e.g., B1

        $('<td id="'+id+'"><div>' + id +'</div></td>').data('accepts', id).appendTo("#grid tr:last").droppable({
            accept: '#stack div',
            hoverClass: 'hovered',
            drop: handleCardDrop
        });
    }
}