在 JQuery 中将动态数据设置为动态创建的表

Question

我正在从数据库中获取对象数组。数据可能不会一直相同，可能会有所不同。

我的数据格式，

var items = [
    { Name: "Apple" },
    { Name: "Orange"},
    { Name: "Banana"},
    { Name: "Cherry"},
    { Name: "ABC"}

];

我想将这些数据排列在块或图块或表中，以便列块的数量应为 3。也就是说，我期望结果为，

 Apple      Orange    Banana
 Cherry     ABC

我尝试了一些代码，

    var html = "";
    html += '<tr>'
    html += '<td>';
    html +='<div class="row">';
    html +='<div class="col-md-12">';
    html +='<div class="col-md-4">';
    var k=1;
     $.each(items,function(key,val){
            if(k==2){
            html +='</div>';
            html +='<div class="col-md-4">';
        }
        if(k==3){
            html +='</div>';
            html +='<div class="col-md-4">';
        }

        html +=val.Name;
        k++;    


     });
     html +='</div></div></div>';
     html += '</td>';
     html += '</tr>';
    $('#maindiv').html(html);

我知道这是错误的，主要原因是我对此并不陌生。谁能帮帮我？

Answer 1

使用append() 方法获得更简单的解决方案

var row = $('<div class="row"></div>');

jQuery.each(items, function(index, value) {

    var column = $('<div class="col-md-4">'+value.Name+'</div>');
    row.append(column);

});

$('#maindiv').append(row);