Заполнение и обновление сетки (или таблицы) странной формы с помощью JQuery и AJAX

Question

У меня странная сетка с разными столбцами высоты. Под этим я подразумеваю, что столбец 1 может иметь 4 квадрата, которые необходимо заполнить, в то время как столбец 2 может иметь 5, а столбец 3 может иметь 2. Для целей этого вопроса предположим, что они являются статическими и имеют следующие значения:

Col   |  Height
---------------
1         4
2         3
3         5
4         2
5         3

Мой первый вызов ajax вернет массив элементов. Каждый item будет иметь name и url.

Функция для обработки исходного вызова, скорее всего, будет выглядеть примерно так:

var processJSONResult = function (data ) {

  myglob= data.data;
  $.each(data.data, function(i, item){

   url = item.url;
   name = item.name; 

  });
}

Так что возникает вопрос первый: какой самый эффективный способ изначально заполнить сетку. У меня есть шаблон HTML, а затем просто заполнить его один за другим? Или я динамически создаю сетку и затем заполняю ее?

Вторая часть вопроса касается обновления. Время от времени страница инициирует вызов ajax для новых записей. Если появятся записи, нам нужно будет случайно (или нет, но я полагаю, что случайным образом проще) добавить их в сетку, заменив одну из старых записей сетки.

Итак, второй вопрос: как лучше всего это сделать, учитывая то, что вы считаете лучшим в первой части?

Я знаю, что это глупый вопрос, поэтому спасибо всем, кто нашел время, чтобы взглянуть на него.

Answer 1

Это на самом деле то, что я в итоге сделал

var populateFPTracks = function(data)
{
    currentcounter=0;
    //alert(data.data[1].track);
    for (x=0; x < totalcols; x++)
    {
        var $colheight= Math.floor(Math.random()*6)+1;
        for (y=0; y < $colheight; y++)
        {
            name = data.data[currenttrackcounter].track.name
            url = data.data[currenttrackcounter].track.url
            currenttrackcounter++;
            $("#do_col"+x).append('<div class="do_trackbox"></div>');
        }

    }

Answer 2

Ну, так как это статично, это будет работать ..

Допустим, у вас есть HTML-документ со сложной таблицей (вложенный или нет ...). Все, что вам нужно сделать, - это получить пару <<code>span id=“squareN”>, где squareN - это имя или номер вашего квадрата.

тогда ваш сервер может ответить следующей строкой JSON:

{“squareA":123, “squareB":456, “squareN":567}

на стороне клиента, все, что вам нужно сделать, это:

$.getJSON("myserver.php", function(squareName, squareValue)
{   $("#" + squareName).text(squareValue); }