2015-06-26 2 views
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); 
     } 
    } 
}; 
+0

В какой строке вы хотите удалить и когда? – user666

+1

Сколько строк должно быть у вашего «стола» в конце? обратите внимание, что вы используете «divs», а не «tables» -> вы можете это сделать, но вы должны определить больше стилей, чтобы получить представление таблицы с divs. – messerbill

+0

Если вы получаете дополнительную строку, почему бы вам не сделать просто измените 'i <7' на' i <6'? – Barmar

ответ

0

Вы можете использовать функцию JQuery's .remove(). Например, если вы хотите удалить последнюю строку: $("#data-row7").remove()

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 
Смежные вопросы