Создание сетки с помощью цикла JQuery for ⇐ Html

[Anonymous]

Я новичок в веб-разработке, но имею довольно солидный опыт программирования. Я пробовал несколько способов создать элемент программно на основе пользовательского ввода. По сути, я пытаюсь создать сетку с помощью JQuery.
Я решаю эту проблему, сохраняя вводимые пользователем данные в переменную и выполняя цикл for для создания сетки. Вот код файла .js:

Код: Выделить всё

var rows = 8;
var columns = 8;
var $row = $("", {class: 'row'});
var $square = $("", {class: 'square'});

$(document).ready(function(){
for(var i = 0; i < rows; i++){
$("#wrapper").append($row);
}

for(var i = 0; i < columns; i++){
$(".row").append($square);
}
});

По какой-то причине этот код создает только одну строку в #wrapper и один квадрат в строке. Я попытался скопировать примеры CSS-файлов, которые решают эту проблему, но, похоже, ничего не помогло. Вот что у меня есть на данный момент для моего CSS:

Код: Выделить всё

#wrapper {
width: 850px;
height: 850px;

margin-top: 100px;
margin-left: auto;
margin-right: auto;

background: #000000;
}

.row {
width: auto;
height: 100px;

background: #313131;
}

.square {
width: 100px;
height: 100px;

margin: 0px;

outline: 1px solid;
display: inline-block;
float: left;
background: #FFFFFF;
}

А вот мой HTML:

Код: Выделить всё

Draw Grid

Может ли кто-нибудь мне помочь? Я так сбит с толку. Я попробовал все. Это ошибка форматирования CSS?

Подробнее здесь: https://stackoverflow.com/questions/255 ... y-for-loop