0

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

2 に答える 2

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
于 2015-06-26T13:12:20.210 に答える
0

JQueryの.remove()機能を利用できます。たとえば、最後の行を削除する場合:$("#data-row7").remove()

于 2015-06-26T12:17:49.667 に答える