Question

我正在尝试使用JS和jQuery动态创建表。（我知道我可以在HTML中硬编码，但我不想这样做。）
我在桌子上有一个额外的排，我在移除时遇到了麻烦有人可以在我的代码中提供最佳解决方法的答案/答案吗？

我的代码发布在下面。

var game = {
    matrix: [],
    startGame: function()
    {
        this.doDomStuff(); //build board
    },
    doDomStuff: function(row, column)
    {
        for(var i = 0; i < 7; i++)
        {
            var row = $('<div>');
            row.attr('id', 'data-row' + (i + 1));
            row.addClass('data-row');
            for(var j = 0; j < 6; j++)
            {
                var column = $('<div>');
                column.attr('id', 'data-column' + (j + 1));
                column.addClass('data-column');
                column.addClass('column');
                row.append(column);
            }
            $('body').prepend(row);
        }
    }
};

Answer 1

如果你正在制作游戏，并且每一行都有自己的逻辑和行为，那么操作数组和DOM结构都会更快。如果您的逻辑更加复杂，您将看到性能的差异。因此，如果您确实需要在那里更新对象，请调用DOM结构。例如：

function SuperTable(){
    this.tablerows = [];
    this.DOMObject = $("body");
}

SuperTable.prototype.AddRow = function() {
    this.tablerows[this.tablerows.length] = new SuperRow(this.tablerows.length,this.DOMObject);
}

SuperTable.prototype.RemoveRow = function(rowIndex) {
    this.tablerows[rowIndex].DOMObject.remove(); // remove element from DOM
    this.tablerows.splice(rowIndex,1); // remove element from logic of the game
}

function SuperRow(rownumber,parent) {
    this.DOMObject = $("<div>");
    this.DOMObject.addClass('data-row');
    parent.prepend(this.DOMObject);
}

mytable = new SuperTable()
mytable.AddRow() // create row on 0 position
mytable.RemoveRow(0) // remove row from 0 position

Answer 2

您可以使用JQuery's .remove()功能。例如，如果要删除最后一行：$("#data-row7").remove()

无法从动态创建的表中删除额外的行

2 个答案: