Question

此代码可以正常创建div的网格：



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 />");
}

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 />"); }

...但是当我调整窗口大小时，div有时会滑到下一行。我想要一个固定6x10大小的表，但是当我尝试构建一个表而不是div时，我打破了“droppable”属性。

如何重写上面的代码，以便创建一个6x10 html表，每个单元格都可以放置？

Answer 1

尝试使用jQuery UI的Sortable库：

http://jqueryui.com/demos/sortable/

您可以仅通过类或ID名称指定可排序的对象。

Answer 2

你应该创建一个<table>，并在每个单元格中放置一个div，并附加一个droppable和width:100%;height:100%;

这将解决您的问题

Answer 3

好的，我需要学习两件事才能做到这一点。第一个是appendTo足够聪明，知道将td放在tr中，所以这行允许我动态创建表行：

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

第二个是我可以识别最后一个（即最近写的）表格行，如下所示：

appendTo("#grid tr:last")

所以最终的结果（它完美地运作，谢谢Mike！）是这样的：



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
        });
    }
}

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 }); } }

如何使用Javascript和jQuery创建一个表，以便每个单元格都可以删除？

3 个答案: