Добавить элементы таблицы из массива объектов, используя jQuery - PullRequest
Новая
       23

Добавить элементы таблицы из массива объектов, используя jQuery

2 голосов
/ 18 октября 2010

Я знаю, что, если у меня будет достаточно времени, я пойму это, но было бы неплохо, если бы какая-то добрая душа указала мне правильное направление. Я относительно неопытен с jQuery, но у меня есть некоторые промежуточные знания JavaScript.

Задан массив объектов в виде: 

[
   {"value1":"10/14/2010", "value2":"1", "value3":"1178.94"},
   {"value1":"10/12/2010", "value2":"1", "value3":"1341.49"}
]

Как мне добавить tr для каждого элемента массива, со значением1, значением2 и значением3 в качестве содержимого каждого дочернего элемента td?

Что меня останавливало, так это: 

var b = $('#table tbody');
tr = b.append($("<tr></tr>"));
tr.append($("<td>blah</td><td>blah</td><td>blah</td>"));

Он добавляет элемент tr, который я доказал с помощью обычных методов DOM. Но он не будет добавлять элементы td. Он действует как результат b.append () - это не добавленный элемент tr? Я полагаю, что это может быть правильно, и мне нужно сделать: 

tr = $("<tr></tr>");
b.append(tr);
tr.append(...);

В любом случае, ваша помощь в правильном следовании была бы очень признательна.

Не берите в голову вопрос о бонусе, но здесь он для справки, так как я отправил его первоначально.

Первые два значения на самом деле являются координатами x и y для третьего значения. Таким образом, в крайнем левом столбце отображается дата, в верхней строке - число 1 или 2, а десятичное значение должно идти в соответствующей ячейке. Любые мысли о том, как сделать это, будут также оценены. Но этот вопрос был в основном о том, почему мой JQuery не работает.

То есть таблица должна выглядеть так: 

              1       2
10/17/2010  2345.6  1543.2
10/16/2010          1234.5
10/15/2010  2222.2

Но я пытался понять, сработал ли сначала весь мой круговой обход ajax / JSON и даже не смог получить , что !! Я сделаю своего рода «объединение слиянием», пройдя по списку дат / столбцов и заполнив имеющиеся значения, и сделаю что-то еще для пропущенных значений.

Ответы [ 2 ]

1 голос
/ 18 октября 2010

попробуйте это: 

//change arrayList to your array variable
var t = "";
$.each(arrayList, function(i, v) {
   t += '<tr><td>'+v.value1+'</td><td>'+v.value2+'</td><td>'+v.value3+'</td></tr>';
});
$('#table tbody').append(t);

Это должно сделать это!

1 голос
/ 18 октября 2010

Когда вы делаете: 

b.append($("<tr></tr>"));

, он возвращает b, поэтому переменная tr фактически ссылается на tbody.

Попробуйте это: 

var b = $('#table tbody');
tr = $("<tr></tr>").appendTo(b);
tr.append( "<td>blah</td><td>blah</td><td>blah</td>" );

Вместо этого используется метод .appendTo() jQuery , чтобы изменить позицию так, чтобы возвращался новый <tr>.

Или вы можете вообще избежать переменных, например:это: 

$("<tr></tr>").appendTo( '#table tbody' )
              .append("<td>blah</td><td>blah</td><td>blah</td>");

или 

$("<tr></tr>").append("<td>blah</td><td>blah</td><td>blah</td>")
              .appendTo( '#table tbody' );
...