добавление нескольких DIV к нескольким TD с использованием jquery - PullRequest
Новая
       20

добавление нескольких DIV к нескольким TD с использованием jquery

0 голосов
/ 19 июля 2011

У меня есть TR с 5 TD в нем.Теперь я хочу добавить к каждому из последних 3 TD ряд div с данными, взятыми из массива: 

arr=[   
{Div1Data:'text1a',Div2Data:'text2a',Div3Data:'text3a'},
{Div1Data:'text1b',Div2Data:'text2b',Div3Data:'text3b'},
{Div1Data:'text1c',Div2Data:'text2c',Div3Data:'text3c'}  
];

, поэтому у меня есть 

var tds=$('td',myTR).slice(2,4);

 how do I addppend the 3 divs to each td to eventually get something like:

<tr>
   <td>foo</td>
   <td>bar</td>
   <td><div>text1a</div><div>text1b</div><div>text1c</div></td>
   <td><div>text2a</div><div>text2b</div><div>text2c</div></td>
   <td><div>text3a</div><div>text3b</div><div>text3c</div></td>
</tr>

.Мне нравится связывать событие click с каждым таким div, поэтому я не хочу составлять HTML, а скорее собираю фактические элементы.

Спасибо

Ответы [ 3 ]

0 голосов
/ 19 июля 2011

это код, который я придумал: http://jsfiddle.net/y5TQF/5/

for(var i=0; i<arr.length; i++)
{
    var div = $("<div />").html(arr[i].Div1Data);
    div.click(function() { /* click handler */ });
    $('table tr td').eq(3).append(div);
}

вы можете сделать то же самое для 4-го и 5-го тд.

0 голосов
/ 19 июля 2011

вы можете попробовать: http://jsfiddle.net/rxjNf/1/

$(function(){

addContent('Div1Data',2);
addContent('Div2Data',3);
addContent('Div3Data',4);

});

 function addContent(p,tdIndexNumber)
    {
    for(var i=0; i<arr.length; i++)
    {
      var div = $("<div />").html(arr[i][p]);
      div.click(function() { /* click handler */ });
      $('table tr td:eq('+tdIndexNumber+')').append(div);
    }
}

AND Этот пример: http://jsfiddle.net/rxjNf/2/ [Получит каждую строку в таблице и добавит содержимое]

0 голосов
/ 19 июля 2011 
tds.each(function() {
    var index=0;
    for (var prop in arr[index]) {
        if (arr[index].hasOwnProperty(prop)) {
            $(this).append($('<div>'+arr[index][prop]+'</div>'));
        }
    }
    index++;
});

(извините за множество правок ... мозг не работает слишком хорошо в этот раз)

http://jsfiddle.net/WR3GA/12/

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

    var el = $('<div>'+arr[index][prop]+'</div>');
    el.bind(...);
    $(this).append(el);

Вы также можете потом использовать селектор, что, вероятно, проще.

...