修改

Question

根据'div'中提供的内容，我想将其划分并显示在no.of列中。请告诉我如何实现这一目标？

任何样品请告诉我。

编辑：

$(document).ready(function () {

        tab_Div = $('#id_of_table');
        for (i = 0; i < 3; i++) {
            debugger;
            $('<tr>').appendTo(tab_Div);
            for (j = 0; j < 3; j++) {
                $('<td>'+ j + '</td>').appendTo(tab_Div);
            }
            $('</tr>').appendTo(tab_Div);
        }

Answer 1

小提琴：http://jsfiddle.net/eF2BF/3/

答案取决于你的数据在div中的结构，如果你想让前60个项目成为第一列，那么60就是第二个，等等。最简单的方法是以这种方式在列之间交替：

Column 1 | Column 2 | Column 3
Item 0   | Item 1   | Item 2
Item 3   | Item 4   | Item 5

我以jsfiddle为例：http://jsfiddle.net/eF2BF/3/ 这段代码的主要部分是：

//Loop through each row (60 times)
for (i = numItems * j; i < numItems * numColumns; i = i + numColumns) {
    tableHtml += '<tr>';
    //Loop through al each column (3 times)
    for (j = 0; j < numColumns; j = j + 1) {
        index = i + j;
        tableHtml += '<td>' + $($items[index]).text() + '</td>'
    }
    tableHtml += '</tr>';

}

修改

我用第二个解决方案更新了小提琴，以便在第一列中获得项目0-59，在第二列中获得60-119，等等。您可以在底部找到它：

//SOLUTION 2
tableHtml = '<table>';
for (i = 0; i < numItems; i = i + 1) {

    tableHtml += '<tr>';

    for(j = 0; j < numColumns; j = j+1){
        tableHtml += '<td>' + $($items[i + (j * numItems)]).text() + '</td>';
    }
    tableHtml += '</tr>';

}
tableHtml += '</table>';

$("#table2").html(tableHtml);

如何在html中动态填充div的多列？

1 个答案:

修改