Question

我有一个带有5个TD的TR。现在我想在最后3个TD的每个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而是构建实际的元素。

由于

Answer 1

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);

您也可以在之后使用选择器，这可能更容易。

Answer 2

这是我提出的代码：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天做同样的事情。

Answer 3

您可以尝试：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/ [将获取表格中的每一行并添加内容]

使用jquery将multipleDIV附加到多个TD

3 个答案: